您的位置：首页 > Web前端 > JQuery

jQuery事件绑定和JavaScript原生事件绑定的区别

2017-08-31 14:53 561 查看
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)。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航