Jquery, 用on, click添加事件有什么区别?
初学Jquery的同学,可能知道用on,和用 click都可以为对象添加点击事件,但不知道二者之间有什么区别。
下面我们通过一些实现来说明,就知道二者的区别所在了。
操作方法
- 01
首先,我们看下,click事件的添加,先添加一些html代码,关键是一个样式名为btn的按钮,
- 02
然后添加一些JS代码,(需要先引入Jquery库文件), JS代码就是为样式名为btn的按钮,添加click事件, 点击后在id为div_result的div上写入一些提示信息
- 03
点击‘点击我’按钮后,正常触发了添加的对应事件。在div上显示了信息。
- 04
再看下on添加的事件。html代码不变,注释掉之前click事件的代码,添加相应on事件的代码,如图
- 05
运行后,点击按钮,也能正常触发on添加的Click事件。
- 06
这次,我们注释掉on添加的事件,然后用之前click事件的代码,并且在页面加载时,用js添加一个按钮,class样式名,同样为'btn'。
- 07
我们点击‘JS添加的按钮’,发现并没有触发对应的事件。 所以在用click注册事件后,我们再添加按钮的话,这个新加的按钮并没有对应的click事件。 因为新加的按钮是在注册事件之后,所以新加的按钮是没有注册到事件的。
- 08
但如果我们改用on去注册事件,如图,注册事件后,我们再添加新的按钮。
- 09
点击JS添加的按钮,能触发对应的事件。说明我们先用on注册了事件,然后再添加新的按钮,还是能触发对应的事件。 为什么这样,因为我们的点击事件是注册在div样式为content上(按钮的父层节点上),而不是直接注册在对应的按钮上。所以,虽然JS添加的按钮是在注册事件后,我们还是可以触发对应的事件的,只要你添加的按钮是在注册事件的div里就行了。
- 10
总结,如果你的html在注册事件之后,没有变化的,用click和用on注册事件都是可以的。 但如果你的html在注册事件后,还会通过JS脚本添加一些按钮,并者希望这些按钮也会有之前注册事件的按钮同样的事件话,就需要用on去为按钮的父节点去注册事件,而不应该用click去为按钮直接注册事件。