今天我弄了一下JS事件,主要说一下addEventListener与attachEvent在FF和IE兼容的问题
在js的事件绑定方法中,ie只支持attachEvent,而FF和Chrome只支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先判断attachEvent只否为真(存在),如果为真则用attachEvent方法,否则的话就用addEventListener 。
语法:target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。
document.getElementById("testText").addEventListener("click", function () {
console.log("按钮被点击了");
}, false);
document.getElementsByTagName("button")[0].addEventListener("click",function(){
console.log("按钮被点击了");
},false);
<div id="d1"><button id="btn"></button></div>
JS代码
document.getElementById("d1").addEventListener("click",function(){
console.log("外层div先触发");
},false);
document.getElementById("btn").addEventListener("click",function(){
console.log("内层按钮先触发");
},false);
注意:如果userCapture是true则外层先触发,如果userCapture是false则内层先触发。如果外层为true,内层为false,则外层先触发。
下面来说一下,attachEvent() 。
target:文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
document.getElementById("btn").attachEvent("onclick",function(){
console.log("按钮被点击了");
});
上面大家可以看到运用事件绑定的时候,事件的区别 一个是用onclick 一个是用到click,所以FF与chrome中的事件是不带on,而IE是必须带on的,下面我们来封装函数,解决兼容性问题。
function addEvent(obj,ev,fn){
if(typeof obj.addEventListener !== "undefined"){
obj.addEventListener(ev,fn,false);
}else{
obj.attachEvent("on"+ev,fn);
}
}
在这里 obj指的是需要监听的对象,ev指的是监听的事件(记得不能带 on 喔),fn指的是触发的函数
var oBtn = document.getElementsByTagName_r("button")[0];
addEvent(oBtn,"click",function(){
console.log("按钮被点击了");
});
最后,我们既然添加监听成功了,那我们怎么删除它呢?其实很简单在这里我就不详细的说了,相信看到这里很多小伙伴们都看累了吧,OK 直接上代码
function removeEvent(obj,ev,fn){
if(typeof obj.addEventListener != "undefined"){
obj.removeEventListener(ev , fn ,false);
}else{
obj.detachEvent('on'+ev , fn);
}
}
第一次写博客,想了很久,不知道结语该说些什么。那我就在此先谢谢大家的观看吧!希望本文的内容可以帮助一些小伙伴节约开发时间和成本,如果真的有所帮助,别忘了在评论里点个赞哦!