【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定
suis 2019-07-25
一、动态监听加载对象
当使用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
<body>
<p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
// onclick这个是通过 dom元素属性 绑定事件，只能有一个事件执行. DOM level 0
var a = document.getElementById('p-style');
a.onclick = function () {
console.log("6、段落被点击了。");
};
a.onclick = function () {
console.log("7、段落被点击了。");
};
});
// 通过 html属性 绑定事件，只能有一个事件执行
function htmlOnclick() {
console.log("4、段落被点击了。");
}
</script>输出结果：
7、段落被点击了。
说明：4和6绑定的点击事件被7的事件覆盖。
分析：
（1）不同绑定事件方式的执行顺序：html属性 > dom元素属性
（2）同一种绑定事件方式顺序：写在前面 > 写在后面
说明：实际项目中，jq和原生js不要混着用。
四、事件绑定方式执行顺序：html属性 > dom元素（onclick方法） > DOM level 2 事件
我们看个栗子
<body>
<p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
var a = document.getElementById('p-style');
// 这个on的方法，click方法，原生的addEventListener原理一致. DOM level 2
$("p").on("click", function () {
console.log("1、段落被点击了。");
});
$(".p-style").on("click", function () {
console.log("2、段落被点击了。");
});
$(".p-style").click(function () {
console.log("3、段落被点击了。");
});
$(".p-style").click(function () {
console.log("5、段落被点击了。");
});
a.addEventListener('click',function(){
console.log("8、段落被点击了。")
})
a.addEventListener('click',function(){
console.log("9、段落被点击了。")
})
// onclick这个是通过 dom元素属性 绑定事件，只能有一个事件执行. DOM level 0
a.onclick = function () {
console.log("6、段落被点击了。");
};
a.onclick = function () {
console.log("7、段落被点击了。");
};
});
// 通过 html属性 绑定事件，只能有一个事件执行
function htmlOnclick() {
console.log("4、段落被点击了。");
}
</script>输出结果：
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方法。
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建li" />
<ul id="ul1"></ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").on("click", function () {
var oli = document.createElement('li');
var otxt = document.getElementById("txt1");
var oul = document.getElementById("ul1");
oli.innerHTML = otxt.value + '<a onclick="deleteItem()" class="ac" id="ac" href="javascript:;">删除</a>';
ali = oul.getElementsByTagName("li");
if (ali.length > 0) {
oul.insertBefore(oli, ali[0]);
}
else {
oul.appendChild(oli);
}
});
// on, click 都属于 DOM level 2 事件
$('.ac').on('click', function () {
console.log('1、删除按钮。')
});
$('.ac').click(function () {
console.log('2、删除按钮。')
});
//动态监听
$(document).on('click', '.ac', function () {
console.log('4、删除按钮。')
});
});
// addEventListenner 都属于 DOM level 2 事件
var ac = document.getElementById("ac")
if (ac) {
ac.addEventListener('click', function () {
console.log('3、删除按钮。')
});
} else {
console.log('未获取到dom元素。')
}
// html元素绑定 DOM level 0 事件
function deleteItem() {
console.log('5、删除按钮。')
}
</script>我们发现，点击删除的时候，输出
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元素属性绑定方法最终只有最后一个事件会执行。
