jQuery on()方法的用法举例

  • A+
所属分类:jQuery

jquery是非常易学,所以也很流行,但是好学,并不代表能学好。那jquery的”on”事件,你会用吗?我相信大家都用过,无非给一个dom绑定一个事件嘛!应该是很简单的了。前面对jQuery on()方法也有介绍。

首先让我们看第一个例子:


页面上两个button,给他们各绑一个点击事件,看一下js是怎么写的

上面的代码非常的简单,在这里只是做一个说明,click能完成的事,用on也可以完成。只是格式有一点不一样而且。
例一完整的html

没错!click能完成的,我们可以on(‘click’)完成。反过来说,on可能更高级一点,

接下来看第二个例子
这回有一点小区别,这回这三个按钮是动态追加进去的。

运行这段代码,你会发现,三个按钮出来了,接下去,我们给他绑定事件。当然实际项目中,我们是先绑定事件,因为dom元素是需要根据业务逻辑再追回进去的。所以我们把绑定事件的代码写在前面。

例二完整代码如下:

打开浏览器跑一下,第一个点击一下,没反映,第二个也点一下还是没有反映,点击第三个发现弹出来了!在项目中,如果你的按钮是js后面追加进到dom里面的,请使用第三种方法绑定事件。将事件绑定在已经存在的dom元素上,第二个参数传触发的dom对象。

看到这里,你不禁会问,我可以全用on事件来绑定事件吗?这个问不绝多回答,大多数情况下是可以的,当然你有一个dom元素,你只想让他触发一次,当然会选用one方法。

第三个例子:
on的反意词是什么?off。所以既然有on,肯定是off的,那么我们来看看on和off是怎么来配合使用的。

操作流程:

一、先点击一下“点我”。发现没有反应。

二、先点击一下“绑定”,再点击“点我”,发现弹出一个1.

三、先点击一下“绑定”,再点击“点我”,发现弹出一个1.再点击“取消”,再点击“点我”;发现不弹了。这时我们会发现,事件是可以绑定和解绑的。

四、“绑定”点击两下,再点击“点我”,发现弹了两次。
这时我们发现,每绑一次,事件就多一次,所以程序中你要是发现事件多绑定,你可能在循环体里面绑定了事件,这样子是很靠谱的,往往会绑定多次,然后导致奇怪的bug

五、“绑定”点击两下,再点击“点我”,发现弹了两次。再点击“取消”,再点击“点我”;发现不弹了。不管绑多少次,解绑一次就全给解完了。所以有时候搞不轻松别人到底绑定多少次,我都全解绑一下,然后再绑定事件,虽然说这样子是可以解决一bug,也只是治标不治本,不推荐这样子操作。

例三的完整代码如下:

我们接着看第四个例子

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 纪涛博客 1

      jQuery 大法好