版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
问题:为元素绑定多个事件,
对象.addEventListener(“事件类型”,事件处理函数,false)方法中,谷歌和火狐支持,IE8不支持
对象.attachEvent(“有on的事件类型”,事件处理函数)方法谷歌和火狐支持不支持,IE8支持
要求:同时让每个浏览器都支持
思路:封装兼容代码,判断浏览器是否支持
具体实现代码如下:
<body>
<input type="button" value="按钮" id="btn"/>
</body>
<script>
/**
* //为任意的一个元素,绑定任意的一个事件
* @param element 任意的元素
* @param type 事件的类型,不加on进行传入
* @param fn 事件处理函数
*/
function addEventListener(element, type, fn) {
//判断浏览器是否支持这个方法
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = fn;
}
}
//测试
addEventListener(document.getElementById("btn"), "click", function () {
console.log("哈哈1");
});
addEventListener(document.getElementById("btn"), "click", function () {
console.log("哈哈2");
});
addEventListener(document.getElementById("btn"), "click", function () {
console.log("哈哈3");
});
</script>