Home / Blog / it

JavaScript基础之事件处理

Author: Vic.Wang 2016/08/10 Tags:事件事件处理事件处理程序eventaddEventListenerremoveEventListenerattachEventdetachEventjs事件

这是一篇JS事件的整理笔记。

JavaScript中有两种事件流,一种是IE的事件冒泡,还有就是Netscape的事件捕获,这两种事件流是完全相反的概念。在W3C事件模型中,首先会进入捕获阶段,直到达到目标元素,再进入冒泡阶段。

DOM0级事件处理程序:

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

    /*事件处理程序赋值*/
    btn.onclick = function() {
        /*xxxx*/
    }

    /*删除事件处理程序*/
    btn.onclick = null;
                    

DOM0级中是将一个函数赋值给一个元素的属性,称为事件处理程序赋值。直接通过 元素.事件 赋值个方法,要删除事件直接赋值为 null。

DOM2级事件处理程序:

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

    btn.addEventListener('click', function() {
        /*xxxx*/
    }, false);

    /*删除事件处理程序*/
    btn.removeEventListener(type, handler, false);
                    

DOM2级的事件处理程序是通过两个函数来处理的添加事件addEventListener()和删除事件removeEventListener()

方法接受3个参数,第一个是要处理的事件名(如click),第二个是作为事件处理的函数(自定义的函数或匿名函数),第三个参数是布尔值(true在捕获阶段调用事件处理程序,false则在冒泡阶段调用,默认是false)

用 addEventListener() 添加的事件只能用 removeEventListener() 来移除,移除时传入的参数和添加的时候相同,但是添加的时候第二个参数是匿名函数的话,这意味着无法移除。

IE事件处理程序:

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

    btn.attachEvent('onclick', function() {
        /*xxxxx*/
    });

    /*删除事件处理程序*/
    btn.detachEvent('onclick', handler);
                    

IE8以及更早版本的IE不支持 addEventListener() 方法,但是提供了IE自有的方法来添加attachEvent()和删除事件detachEvent()

IE提供的方法接受2个参数:事件名称和事件处理函数。

注意:IE中的事件名称是要在事件名之前加on的,如click事件,要写成onclick,click -> onclick

attachEvent()方法添加的事件处理程序会在全局作用域内运行,this等于window。

事件兼容封装:

我们封装一下代码,以后可以直接拿来用。

    function addEvent(element, type, handler) {
        if (element.addEventListener) {  /*DOM2级*/
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) { /*IE*/
            element.attachEvent('on' + type, handler);
        } else { /*DOM0级*/
            element['on' + type] = handler;
        }
    }

    function removeEvent(element, type, handler) {
        if (element.removeEventListener) { /*DOM2级*/
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) { /*IE*/
            element.detachEvent('on' + type, handler);
        } else { /*DOM0级*/
            element['on' + type] = null;
        }
    }

    var btn = document.getElementById('btn');
    var handler = function() {
        /*xxxxx*/
    }
    addEvent(btn, 'click', handler);
    removeEvent(btn, 'click', handler);
                    

上面的代码中,我们用特帧检测,先检查DOM2级是否支持,不支持则检测IE是否支持,都不支持则使用DOM0级的方法绑定事件。