关于浏览器事件

Posted 2020-10-06 风落夕

 

浏览器事件流是指页面接受事件的顺序：

有事件捕获和事件冒泡：

事件捕获是指从document到html再到body最后到div元素。

事件冒泡是指事件会从div传到body再到html再到最外面的document。

在dom事件流中分为事件捕获，处于目标阶段，事件冒泡。

事件处理程序，也就是绑定事件有html事件处理程序，dom0级事件处理程序，dom2级处理程序，和ie事件处理程序。

html处理程序就是在html中绑定事件：<input type="button" name="btn1" value="Click me!" onclick="alert(‘hahahahah‘)">

dom0级事件处理程序：直接为元素绑定事件var  btn=document.getElementById("btn");btn.onclick=function(){alert(this.id);}要取消事件可以直接设置btn.onclick=null;

dom2级事件处理程序：用addEventListener方法可以添加多个事件var  btn=document.getElementById("btn");btbtn.addEventListener("click",handler1,false);n.addEventListener("click",handler,false);btn.addEventListener("click",handler2,false);false表示在冒泡阶段执行，为true的话在捕获阶段执行。用btn.removeEventLisener("click",handler,false);来取消绑定的时间，用匿名函数绑定的函数用这个是取消不了的。

IE时间处理程序：var  btn=document.getElementById("btn"); btn.attchEvent("onclick",handler)；var handler= function(){ alert(this)}; 这里的this是window，因为使用attachEvent是在全局作用域里执行的。可以用btn.detachEvent("incliclk",handler)取消事件绑定。IE都是在冒泡阶段执行。支持IE处理程序的浏览器有IE和Opear。

跨浏览器的时间处理程序

var EventUntil={

　　　　addHandler :function(element,type,handler){

　　　　if(element.addEventLisener)

　　element.addEventListener(type,handler,false);

　　　　else if(element.attachEvent)

　　　　element.attachEvent("on"+type,handler);

　　　　else{

　　　　　　elment["on"click]=handler();　　　　

　　　　　　}



　　},

　　removeHandler:function(element.type,handler){

　　if(element.removeEventLisener)

　　element.removeEventListener(type,handler,false);

　　else if(elemen.detachEvent)

　　{

　　element.detach("on"+type,handler);

　　}

　　else{

　　element["on"type]=null;

　　}

}

};

 

调用的时候：

var  btn=document.getElementById("btn");

var handler= function(){ alert(this)}; 

EventUntil.addEvent(btn,click,handler);