首页 > 代码库 > js事件处理机制

js事件处理机制

一、事件处理程序

a.     DOM0级事件处理程序,被认为是元素的方法。

var btn=document.getElementById(‘myBtn‘);      btn.onclick=function(){          alert(this.id); //‘myBtn‘      };  

 在事件处理程序中,通过this访问元素的任何属性和方法。

b.    DOM2级事件处理程序

DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener( )和removeEventListener( )。

所有节点都包含这两个方法,都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。如果这个布尔值为true,表示在捕获阶段调用事件处理程序;如果这个布尔值为false,表示在冒泡阶段调用事件处理程序。

obj.addEventListener(‘click‘,function(){      console.log(‘捕获模式‘);  },true);      obj.addEventListener(‘click‘,function(){         
  console.log(
‘冒泡模式‘); },false);

 

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,并按照添加顺序触发。

通过addEventListener( )添加的事件处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加处理程序时使用的参数相同。因此,通过addEventListener( )添加的匿名函数将无法删除。

var btn=document.getElementById(‘myBtn‘);      btn.addEventListener(‘click‘,function(){          alert(this.id);      },false);      //此时removeEventLister方法无效,因为function是匿名函数,与addEventListener中的不同。      btn.removeEventListener(‘click‘,function(){          alert(this.id);      },false);  

正确方式:

var btn=document.getElementById(‘myBtn‘);  var handle =function(){      alert(this.id);  };  btn.addEventListener(‘click‘,handle,false);  //此时removeEventListener有效  btn.removeEventListener(‘click‘,handle,false);   

IE9,Firefox,Safari,Chrome和Opera支持DOM2级事件处理程序。

c.     IE事件处理程序

IE实现了与DOM中类似的两个方法:attachEvent( )和detachEvent()。

这两个方法相同的两个参数:事件处理程序名称与事件处理程序函数。IE8级之前版本只支持事件冒泡,所以通过attachEvent( )添加的时间处理程序都会被添加到冒泡阶段。

var btn=document.getElementById(‘myBtn‘);  var handle =function(){      alert(this.id);  };  btn.attachEvent(‘onclick‘,handle);

注意:在通过detachEvent( )来移除使用attachEvent()添加的事件时,条件是必须提供相同的参数,与DOM方法一样,添加的匿名函数也不能被移除。

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。

DOM0级方法中,事件处理程序会在其所属元素的作用域内运行,在使用attachEvent() 方法时,事件处理程序会在全局作用域中运行,因此,this等于window。

二、 IE与Firefox的事件机制区别

 

 

IE8及以前版本

Firefox即IE9+

事件处理方法

attachEvent( )和detachEvent( )

addEventListener( )和removeEventListener()

接受参数

两个:事件处理程序名称和事件处理程序函数

三个:事件处理程序名称,事件处理程序函数,布尔值

支持事件类型

仅支持事件冒泡

支持事件冒泡和事件捕获

第一个参数

需在事件前添加on,例如onclick

不需在事件前添加on,例如click

为一个元素添加多个事件处理程序执行顺序

按照与添加顺序相反的顺序执行,即后添加,先执行

按照添加顺序执行,即先添加,先执行

移除事件,参数设置

detachEvent( )中的参数需与attachEvent( )传入的参数一致,即两个参数

removeEventListener( )中的参数addEventListener( )传入的参数一致,即要三个参数

三、跨浏览器的事件处理程序

var EventUtil = {  
  // 添加事件 addHandler:
function(element,type,handle){ if (element.addEventListener) { element.addEventListener(type,handle,false); }else if(element.attachEvent){ //IE element.attachEvent("on"+type,handle); }else{ element["on"+type]=handle; },
  //删除事件 removeHandle:
function(element,type,handle) { if (element.removeEventListener) { element.removeEventListener(type,handle,false); }else if (element.detachEvent) { element.detachEvent("on"+type,handle);
    }
else{ element["on"+type]=null; } } }
};
var btn=document.getElementById(‘myBtn‘);
var handle = function(){   alert("Cliked");   }; EventUtil.addHandler(btn,"click",handle); EventUtil.removeHandle(btn,"click",handle);

 

js事件处理机制