你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公衆號：Web前端之巔 博客園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/ +----------------------------------------------------------- 在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html
1、爲元素綁定多個事件
**前導：**若是一個按鈕綁定了多個點擊事件，那麼點擊按鈕的時候只會執行最後一個點擊事件，前面的點擊事件都被覆蓋了。那麼如何爲一個按鈕綁定多個相同的事件，而且每一個事件都會執行呢？前端
一、爲元素綁定多個事件
<body>
<input type="button" value="按鈕1" id="btn1">
<input type="button" value="按鈕2" id="btn2">
<!-- <div id="dv"></div> -->
<script src="common.js"></script>
<script>
// 參數有3個
// 參數1：事件的類型（事件的名字），不要on
// 參數2：事件處理函數（命名函數或者匿名函數）
// 參數3：false
// 兼容性：chrome，firefox支持，IE8不支持
my$("btn1").addEventListener("click", function() {
alert("1");
},false)
my$("btn1").addEventListener("click", function() {
alert("2");
},false)
my$("btn1").addEventListener("click", function() {
alert("3");
},false)
// 參數有2個
// 參數1：事件的類型（事件的名字），要on
// 參數2：事件處理函數（命名函數或者匿名函數）
// 兼容性：chrome，firefox不支持，IE8支持
my$("btn2").attachEvent("onclick", function() {
alert("4");
});
my$("btn2").attachEvent("onclick", function() {
alert("5");
});
my$("btn2").attachEvent("onclick", function() {
alert("6");
});
</script>
</body>
綁定事件的方式：git
addEventListener: chrome，firefox支持，IE8不支持github
attachEvent: chrome，firefox不支持，IE8支持chrome
二、綁定事件兼容代碼
<body>
<input type="button" value="按鈕" id="btn">
<script src="common.js"></script>
<script>
// 爲任意元素添加任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件1");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件2");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件3");
});
</script>
</body>
my("dv").onclick == my$("dv")["onclick"]微信
三、綁定事件的區別
-
方法名不一樣；函數
-
參數個數不一樣，addEventListener有三個參數，attachEvent有兩個參數；學習
-
addEventListener中事件的類型沒有 on，attachEvent中事件的類型有on；this
-
chrome,firefox 支持 addEventListener ，IE8不支持；spa
chrome,firefox 不支持 attachEvent ，IE8支持；
-
事件中的 this 不一樣，addEventListener 中的 this 是當前綁定的對象；
attachEvent 中的 this 是 window。
2、爲元素解綁事件
一、三種方式
1.一、方式一
若是使用 元素.onclick = function(){}; 的方式綁定對象的話，解綁的方式爲 元素.onclick = null;
1.二、方式二
若是使用 元素.addEventListener("click", f1, false); 的方式綁定對象的話，解綁方式爲 元素.removeEventListener("click", f1, false);
注意：這裏面不能使用匿名函數，由於須要同一個事件處理函數，而兩個匿名函數是兩個不一樣的函數，因此須要使用命名函數。
1.三、方式三
若是使用 元素.attachEvent("onclick", f1); 的方式綁定對象的話，解綁方式爲 元素.detachEvent("onclick", f1);
二、解綁事件兼容代碼
// 爲任意元素綁定任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
// 爲任意元素解綁任意事件
function removeAnyEventListener(element, type, funcName) {
if(element.removeEventListener) {
element.removeEventListener(type, funcName, false);
} else if(element.detachEvent) {
element.detachEvent("on"+type, funcName);
} else {
element["on"+type] = null;
}
}
示例：
<body>
<input type="button" value="按鈕" id="btn1">
<input type="button" value="按鈕" id="btn2">
<script src="common.js"></script>
<script>
function f1() {
console.log("第一個");
}
function f2() {
console.log("第二個");
}
addAnyEventListener(my$("btn1"), "click", f1);
addAnyEventListener(my$("btn1"), "click", f2);
my$("btn2").onclick = function () {
removeAnyEventListener(my$("btn1"), "click", f1);
}
</script>
</body>