jQuery事件绑定和JavaScript原生事件绑定的区别
程序员文章站
2022-05-31 11:52:02
...
jQuery中的事件绑定具有叠加性，JavaScript原生的事件绑定则是可覆盖的。具体看一下示例代码：
<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="click me">
<input type="button" id="click me2" value="click me2">
<script>
$(":input[value='click me']").click(function(){
console.log("first")}
);
$(":input[value='click me']").click(function(){
console.log("second")}
);
$(":input[value='click me']").click(function(){
console.log("3rd")}
);
var cm2 = document.getElementById("click me2");
cm2.onclick=function(){
console.log("first");
};
cm2.onclick=function(){
console.log("second");
};
cm2.onclick=function(){
console.log("3rd");
};
</script>
</body>
</html>HTML界面如下：
点击第一个按钮后，在浏览器的调试窗口（F12）可以看到如下结果：
点击第二个按钮后，输出结果为：
代码中使用jQuery的事件绑定方法对同一个按钮的click事件先后绑定了三个处理函数，显示结果说明了jQuery的事件处理函数是叠加的；而使用JavaScript原生的事件绑定可以发现后面绑定的事件处理函数覆盖了前面的事件处理函数。
这个差异在使用jQuery包进行前端开发的过程中可能会对程序造成影响。
当我们需要累加事件处理函数，可以直接使用jQuery的事件绑定；然而当我们需要重新设定事件的处理函数时，若使用的是jQuery事件绑定，则需要注意在重新绑定事件之前解绑之前的事件(unbind)。
上一篇： DataBinding 简单使用
下一篇： 星巴克回应比特币支付：我们不接受数字资产