js事件处理机制

Posted 2020-08-08 xixi

一、事件处理程序

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);