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去为按钮直接注册事件。

Jquery, 用on, click添加事件有什么区别？

操作方法

相关推荐