JS事件机制

事件流

事件流指从页面接收事件的顺序，分为冒泡(IE)和捕获

'DOM2级事件'规定的事件流包括三部分：捕获、处于目标阶段、冒泡

事件处理程序

1 DOM 0级事件处理方式

通过dom元素的事件处理程序属性添加，在冒泡阶段被处理，例如：

    <button id="my-btn">click me</button>

    var oBtn = document.getElementById('my-btn');
    oBtn.onclick = function () {
        console.log('click');
    };
    /* 移除 */
    oBtn.onclick = null;

这种方法任何浏览器都支持。

2 DOM 2级事件处理方式

提供了两个方法用来添加和删除事件处理程序，即addEventListener和removeEventListener。

它们都接受三个参数：处理的事件名、处理函数、表示是否使用捕获的标志。例如：

    <button id="my-btn">click me</button>

    var clickHandler = function () {
        console.log('click');
    };
    var oBtn = document.getElementById('my-btn');
    /* 添加点击事件 在冒泡阶段使用 */
    oBtn.addEventListener('click', clickHandler, false);
    /* 移除刚才的点击事件 */
    oBtn.removeEventListener('click', clickHandler, false);

这种方式适合非IE浏览器。

3 IE事件处理方式

提供了两个方法用来添加和删除事件处理程序，即attachEvent和detachEvent。

它们都接收两个参数：处理的事件名（需要在前面加on，例如：'onclick'）、处理函数，会在冒泡阶段处理，例如：

    <button id="my-btn">click me</button>

    var clickHandler = function () {
        console.log('click');
    };
    var oBtn = document.getElementById('my-btn');
    oBtn.attachEvent('onclick', clickHandler);
    oBtn.detachEvent('onclick', clickHandler);

特殊的是，attachEvent添加的多个处理函数执行顺序与添加顺序相反。

4 兼容多个浏览器的事件添加和删除

    var EventUtil = {
        addHandler: function(element, type, handler) {
            //w3c
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            }
            //ie
            else if (element.attachEvent) {
                element.attachEvent('on' + type,handler);
            } else {
                element['on' + type] = handler;
            }
        },
        removeHandler: function() {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }
    }

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。

1 兼容DOM的浏览器

所有事件对象都会包含的属性和方法

属性/方法	类型	读/写	说明
type	string	只读	事件类型
bubbles	bool	只读	表示事件是否冒泡
cancelable	bool	只读	表示是否可以取消事件的默认行为
currentTarget	Element	只读	当前正在处理事件的元素
target	Element	只读	事件的目标，个人认为就是触发事件的元素
trusted	bool	只读	是浏览器生成的还是js代码生成的
defaultPrevented	bool	只读	为true表示已经调用了preventDefault()
detail	int	只读	与事件相关的详细信息
eventPhase	int	只读	调用事件处理程序的阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true可以使用
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理函数被调用
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbles为true可以使用

无论是DOM0级还是DOM2级方式都可以在处理函数中定义event参数来获取事件对象

    <button id="my-btn">click me</button>

    var oBtn = document.getElementById('my-btn');
    oBtn.onClick = function (event) {
        console.log(event.type); // display click
    };
    oBtn.addEventListner('click', function (event) {
        console.log(event.type); // display click
    }, false);

2 IE

所有事件对象都会包含的属性。

属性/方法	类型	读/写	说明
type	string	只读	事件类型
srcElement	Element	只读	事件目标，和target相同
cancelBubble	bool	只读	默认值false,设置为true就可以取消冒泡。和stopPropagation()作用相同
returnValue	bool	只读	默认值true，设置为false可以取消默认行为。和preventDefault()作用相同

获取事件对象

    <button id="my-btn">click me</button>

使用DOM0级方式时，event作为window的一个属性存在

    var oBtn = document.getElementById('my-btn');
    oBtn.onClick = function () {
        var event = window.event;
        console.log(event.type); // display click
    };

使用attachEvent添加的事件处理函数也会接收到一个event参数。

    oBtn.attachEvent('onclick', function (event) {
        console.log(event.type); // display click
    });

完整的事件工具方法

    var EventUtil = {
        addHandler: function(element, type, handler) {
            //w3c
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            }
            //ie
            else if (element.attachEvent) {
                element.attachEvent('on' + type,handler);
            } else {
                element['on' + type] = handler;
            }
        },
        removeHandler: function() {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        /* 获取事件对象 */
        getEvent: function (event) {
            return event || window.event;
        },
        /* 获取事件源 */
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        /* 阻止默认行为 */
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        /* 阻止捕获或者冒泡 */
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation()
            } else {
                event.cancelBubble = true;
            }
        }
    }