原生 绑定和解除绑定事件
参考链接
https://www.cnblogs.com/jsdarkhorse/archive/2012/09/19/2693191.html
// 事件绑定
this.bindHandler = (function() {
if (window.addEventListener) {// 标准浏览器
return function(elem, type, handler) {// elem:节点 type:事件类型 handler:事件处理程序
// 最后一个参数为true:在捕获阶段调用事件处理程序 为false:在冒泡阶段调用事件处理程序
elem.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {// IE浏览器
return function(elem, type, handler) {
elem.attachEvent("on" + type, handler);
}
}
})();
// 事件解除
this.removeHandler = (function() {
if (window.removeEventListerner) {// 标准浏览器
return function(elem, type, handler) {
elem.removeEventListerner(type, handler, false);
}
} else if (window.detachEvent) {// IE浏览器
return function(elem, type, handler) {
elem.detachEvent("on" + type, handler);
}
}
})();jquery事件重复绑定解决办法
参考大佬链接 全是干货：http://blog.csdn.net/qq_30114149/article/details/79413432
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="add-event-more">叠加绑定SayHello事件</button>
<button id="add-event-one">先移除再绑定SayHello事件</button>
<button id="say-hello">Say Hello</button>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var iCount = 0;
function sayHello() {
alert("Hello!");
}
// 每Click1次，多响应事件一次（叠加了）
$('#add-event-more').on('click', function () {
iCount = iCount + 1;
$("#say-hello").html("Say Hello" + iCount + "次");
$("#say-hello").on("click", sayHello); // 绑定事件（事件叠加了）
});
// 永远只响应1次事件
$('#add-event-one').on("click", function () {
$('#say-hello').html("Say Hello 1次");
$("#say-hello").off('click').on('click', sayHello); // 先移除事件（避免事件叠加），在绑定事件
})
})
</script>
</body>
</html>