大白话之JavaScript事件-原创手记-慕课网

JavaScript与HTML的交互是通过事件来完成的，可想而知事件的重要性，今天将对事件的事件流、事件处理程序、事件对象以及事件委托来进行大白话说明。

1.事件流

事件流简单来说就是从页面中接收事件的顺序，然而就是这事件流却分成了两大门派-事件冒泡流跟事件捕获流。

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素，（文档嵌套层次最深的节点）接收，然后逐渐向上传播到较为不具体的节点（文档），并且所有现代的浏览器都支持事件冒泡。

而事件捕获则是不太具体的节点更早接收到事件，而具体的节点最后接收到事件，不建议使用事件捕获。

图片描述

2.事件处理程序

事件就是用户或浏览器自身执行的某种动作，而事件处理程序（或事件侦听器）就是响应某个事件的函数。

2.1 HTML事件处理程序

添加到HTML元素中的事件处理程序就是HTML事件处理程序

<input type="button" value="点击" onclick="alert('hello')" />

2.2 DOM0级事件处理程序

DOM0级事件处理程序：通过JavaScript将一个函数赋值给一个对象的事件。

var oBtn = document.getElementById("btn");

oBtn.onclick = function() {
    alert(this.id); // btn
}

2.3 DOM2级事件处理程序

DOM2级事件定义两个方法，用于处理制定和删除事件处理程序的操作-addEventListener()和removeEventListener()。

两个方法都接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。布尔值参数为true，则在捕获阶段调用事件处理程序；false则在冒泡阶段调用事件处理程序。

var oBtn = document.getElementById("btn");

oBtn.addEventListener("click", function(){
    alert(this.id);
}, false);

而删除事件处理程序则需要将指定的事件处理程序的引用添加到removeEventListener的第二个参数中。

var oBtn = document.getElementById("btn");
var handler = function() {
    alert(this.id);
}

oBtn.addEventListener("click", handler, false);

oBtnl.removeEventListener("click", handler, false);

2.4 IE事件处理程序

IE实现了与DOM类似的两个方法，一样用于添加跟删除事件处理程序-attachEvent()和detachEvent()

两个方法都接收两个相同的参数，事件处理程序名称与事件处理程序函数。

var oBtn = document.getElementById("btn");

oBtn.attachEvent("onclick", function() {
    alert(this === window);    // true
});

注意：
1 事件类型需要加"on"
2 在IE中使用attachEvent()跟detachEvent()，事件处理程序将在全局作用域运行，
而DOM0级事件处理程序中则是在其所属元素的作用域内运行

2.5 跨浏览器的事件处理程序

跨浏览器的事件处理程序就是创建一个对象，存放着两个用于添加跟删除事件处理程序的方法，而这两个方法都接收三个参数：要操作的元素，事件名称和时间爱你处理程序函数。

var EventUtil = {

    // 添加事件处理程序
    addHandler: function(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;
        }
    },

    // 删除事件处理程序
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }

}

3.事件对象

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

3.1 DOM中的事件对象
图片描述
3.2 IE中的事件对象

图片描述

3.3 跨浏览器的事件对象

var EventUtil = {

    // 添加事件处理程序
    addHandler: function(element, type, handler) {
        // 省略
    },

    // 删除事件处理程序
    removeHandler: function(element, type, handler) {
        // 省略
    },

    // 获取事件对象
    getEvent: function(event) {
        return event ? 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 = false;
        }
    }
}

4.事件委托

对过多的DOM添加事件的解决方案就是事件委托。
事件委托是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。

<ul id="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

<script type="text/javascript">
var oList = document.getElementById("list");

oList.onclick = function(event) {
    event ? event : window.event;
    var target = event.target || event.srcElement;

    console.log(target.innerHTML);
}

</script>