html 绑定on,【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定...

一、动态监听加载对象

当使用js或jQuery动态创建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，因为传统的$('.selector').click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。

所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。

二、jQuery.on()用法

1、定义和用法

(1)on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

(2)自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

(3)注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

(4)提示：如需移除事件处理程序，请使用 off() 方法。

(5)提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

2、语法

$(selector).on(event,childSelector,data,function)

三、事件绑定方式执行顺序：html属性 > dom元素(onclick方法)

先看例子1

点击这个段落。

输出结果：

7、段落被点击了。

说明：4和6绑定的点击事件被7的事件覆盖。

分析：

(1)不同绑定事件方式的执行顺序：html属性 > dom元素属性

(2)同一种绑定事件方式顺序：写在前面 > 写在后面

说明：实际项目中，jq和原生js不要混着用。

四、事件绑定方式执行顺序：html属性 > dom元素(onclick方法) > DOM level 2 事件

我们看个栗子

点击这个段落。

输出结果：

7、段落被点击了。

1、段落被点击了。

2、段落被点击了。

3、段落被点击了。

5、段落被点击了。

8、段落被点击了。

9、段落被点击了。

说明：通过addEventListener方式绑定事件(jq的on方法，js的click方法)是可以绑定多个事件。

分析：

(1)不同的绑定方式执行顺序：html属性 > dom元素(DOM level 0 事件) > DOM level 2 事件。

(2)DOM level 2 事件中：谁先绑定谁先执行。

(3)jq的on，js的click，addEventListener，可以绑定多个事件。

说明：实际项目中，jq和原生js不要混着用。

五、动态绑定：jq的on方法+html的属性onclick方法

实用jq或者原生js创建元素(比如：append，appendChild，insertBefoe等)，实用on(event, fun)或者addEventListener等传统的监听事件，事件不会触发。原因：不能这些方法只能监听到html初始化的对象，后续动态添加的方法需要寻找其他绑定方法。jq的on()方法+html的属性onclick方法。

我们发现，点击删除的时候，输出

5、删除按钮。

4、删除按钮。

说明：

1、执行顺序：html的属性绑定比jq的on方法快。(html属性绑定>DOM level 2 事件)

2、动态绑定事件方法：(1)jq的on方法；(2)html的属性绑定。

说明：实际项目中，jq和原生js不要混着用。

六、总结

上面例子的jq是1.10的版本。

1、事件的绑定方法：(1)html属性绑定(比如：onclick)，(2)dom元素属性(比如onclick)，也叫DOM level 0 事件，(3)原生的addEventListener和jq的on和jq的click(DOM level 2 事件)。

2、绑定方法的执行顺序：html属性 > dom元素属性 > DOM level 2 事件

3、同一种绑定事件方式顺序：写在前面 > 写在后面。

4、html属性和dom元素属性绑定方法最终只有最后一个事件会执行。