JavaScript 事件机制

一、事件处理程序

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级方法中，事件处理程序会在其所属元素的作用域内运行，在使用attachEvent（）方法时，事件处理程序会在全局作用域中运行，因此，this等于window。
---------------------
作者：lysunnyrain
来源：CSDN
原文：https://blog.csdn.net/lysunnyrain/article/details/50903146
版权声明：本文为博主原创文章，转载请附上博文链接！