JS事件封装函数，跨浏览器添加事件和删除事件

JS事件封装函数，跨浏览器添加事件和删除事件

一、事件流

事件流 描述的是从页面中接受事件的顺序。

1.事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发

2.事件铺货

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

二、事件的处理

W3C：
用于用于处理和删除事件处理程序的操作：
addEventListener()；绑定事件的对象方法。
removeEventListener();删除事件
他们都含有三个参数，一个是事件名称，另一个是事件执行的函数，最后一个是事件捕获，，
obj.addEventListener("click",function(){},true/false);
obj.redEventListener("click",function(){},true/false);
这里的事件名称跟直接写的事件名称不一样，在这里前面没有on,
还有就是按以往的方法定义事件的话后面的会覆盖掉前面的事件函数，
但是按这种方式写的话几个事件函数都会执行，
最后是true和false的解释，，事件在执行时都会有俩个流，一个是捕获事件流，另一个是冒泡事件流，进来的事件是捕获事件，出去的事件是冒泡事件，true的话会捕获进来时的，false的话会捕获出去时的
addEventListener()的使用方法：
target:addEventListener(type,listener.useCpatur);

target:文档节点，document、window、或XMLHTTPRequest。
type:字符串，事件名称，不含‘on’，比如‘click’，‘mouseover’，‘keydown’等等。
listener：实现了eventListener接口或是JavaScript中的函数。
useCapture：是否使用捕获，一般用false。例如：document.getElementByID("textText").addEventListener('keydown',function(event){

alert('event.keyCode');},false);

IE：

attachEvent()添加事件
detachEvent()删除事件

三、 跨浏览器事件绑定 封装

//添加事件 function addEvent(obj,type,fn){//obj目标对象,type事件类型,fn函数回调     if(typeof obj.addEventListener!=='undefined'){//W3C 标准         obj.addEventListener(type,fn,false);//type事件名称,fn执行函数,false捕获     }else if(typeof obj.attachEvent!=='undefined'){//IE         obj.attachEvent('on'+type,fn);         fn.call(obj,window.event);//对象冒充              }      }

//删除事件 function removeEvent(obj,type,fn){     if(typeof obj.removeEventListener!=='undefined'){         obj.removeEventListener(type,fn,false);     }else if(typeof obj.detachEvent!=='undefined'){         obj.detachEvent('on'+type);     } }

//阻止默认事件(跨浏览器) function preDef(event){     var e=getEvent(event);     if(typeof e.preventDefault!=='undefined'){//W3C标准         e.preventDefault();     }else{//IE         e.returnValue=false;     } }

四、调用事件

window.οnlοad=function(){     var obutton=document.getElementById('btn');     addEvent(obutton,'click',fn1);//添加事件     //removeEvent(obutton,'click',fn);//删除事件     addEvent(obutton,'click',fn2);     addEvent(obutton,'click',fn3);     removeEvent(obutton,'click',fn1);      var a=document.getElementById('a');      addEvent(a,'click',function(e){          e.preventDefault();//阻止默认事件      }); }; function fn1(e){     alert('1'); } function fn2(e){     alert('2'); } function fn3(e){     alert('3'); }

五、html代码

<input type="button" id="btn" value="按 钮" />     <a href="https://www.baidu.com/" id="a">百度网址，百度一下，你就知道</a>