码迷,mamicode.com
首页 > 其他好文 > 详细

关于浏览器事件

时间:2017-09-11 19:55:22      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:type   事件   html   move   eve   onclick   nbsp   div   att   

 

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

有事件捕获和事件冒泡:

事件捕获是指从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);

 

关于浏览器事件

标签:type   事件   html   move   eve   onclick   nbsp   div   att   

原文地址:http://www.cnblogs.com/likechou/p/7506201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!