JavaScript基础之事件处理

这是一篇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级的方法绑定事件。