js事件浅析

js中关于DOM的操作很多，因此js事件机制也就尤为重要。

事件绑定形式：

一. 内联形式

耦合度高，不利于维护

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

二. 属性绑定（DOM0级事件）

只能绑定一个函数

button.onclick = function() {};

三. 事件监听函数（DOM2级事件）

element.addEventListener(<event-name>, <callback>, <use-capture>);

element.removeEventListener(<event-name>, <callback>, <use-capture>);

element.attachEvent(event, callback)(IE11以后用addEventLisener)；

element.detachEvent(event, callback)(IE11以后用addEventLisener)；

事件代理

在父元素上绑定事件，监听子元素的事件。主要用于子元素是新建元素或者子元素个数很多的情况下。这种方法可以提高性能，同时避免提前绑定元素事件而导致新建元素的事件没有生效的结果。

<ul> <li>11111111111111111111</li> </ul>

document.addEventListener('click', function (e) {
            console.log('document currentTarget: ' + e.currentTarget.nodeName);
            console.log('document target: ' + e.target.nodeName);
            if (e.target.nodeName === 'LI') {
                console.log('dom delegate: ' + e.eventPhase);
            }

            console.log(this);
        }, true);

 

事件触发顺序

• Event Capturing(事件捕获)： Netscape
• Event Bubbling(事件冒泡)： IE

这两种方式确定了事件执行的前后顺序，只不过后来W3C对DOM2的事件模型给出了一个规范：首先进入事件捕获阶段->达到元素后->进入事件冒泡阶段。

可以通过event.eventPhase查看事件触发阶段：

eventPhase (number): 这个属性的数字表示当前事件触发在什么阶段。

• 0: none
• 1: 捕获
• 2: 目标
• 3: 冒泡

1. DOM0

在元素处于目标时触发该事件。

2. DOM2
当addEventListener的最后参数为false时，是在冒泡阶段触发。如果是true的话是在捕获阶段出发。attachEvent始终是冒泡阶段触发。

允许捕获机制的事件流触发顺序：

事件流的触发顺序是首先从document元素开始，触发绑定在document上的捕获事件，依次向下，直到目标元素上。然后触发绑定在目标元素上的事件。最后依次向上，直到触发document元素上绑定的捕获事件。分别可以对于捕获阶段，处于目标阶段，冒泡阶段，捕获过程和冒泡过程并不包含目标元素阶段。

尝试下面的函数：

<ul>
        <li>11111111111111111111</li>
</ul>
<script>
    document.querySelector('li').addEventListener('click', function (e) {
            console.log('False currentTarget: ' + e.currentTarget.nodeName);
            console.log('False target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        }, false);
    document.querySelector('li').addEventListener('click', function (e) {
            console.log('True currentTarget: ' + e.currentTarget.nodeName);
            console.log('True target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        }, true);

    document.querySelector('ul').addEventListener('click', function (e) {
            console.log('ul false currentTarget: ' + e.currentTarget.nodeName);
            console.log('ul false target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        }, false);
    document.querySelector('ul').addEventListener('click', function (e) {
            console.log('ul true currentTarget: ' + e.currentTarget.nodeName);
            console.log('ul true target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        }, true);
    document.querySelector('li').onclick = function (e) {
            console.log('Onclick currentTarget: ' + e.currentTarget.nodeName);
            console.log('Onclick target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        };

</script>

BeCareful: 可以看到，当点击li的时候，前两个绑定的事件是按照顺序来执行的，并没有先执行捕获事件然后执行冒泡事件，而是按照绑定顺序执行的。且event.eventPhase的值为2。

原因是：浏览器针对于事件的触发机制是，执行每个阶段会先设置在哪个阶段，然后在node的事件数组里执行相应阶段的事件。如果处于目标阶段是不区分捕获或者冒泡阶段的，直接按照注册顺序执行当前事件数组里的函数。event.eventPhase是在调用这些方法的时候设置的。而true和false是在注册的时候开发者传入的。

注释里面的那段话的意思就是，在目标阶段会触发捕获和冒泡事件的监听函数，因此，它会按照注册顺序执行，跟我们平时理解的顺序并不一样。

自定义事件

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数。
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如：

var  div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
var e = document.createEvent("CustomEvent");
e.initCustomEvent("myEvent",true,false,"hello world!");
div.dispatchEvent(e);
}

事件对象及行为

1. 事件目标

event = event || window.event;
target = event.target || event.srcElement;

event.target 和event.currentTarget的区别：前者是触发事件的最终目标，后者是绑定事件时的目标。

借用事件代理的例子：

<div class="btn" onclick="console.log('onclick')">
        <span>sss</span>
</div>

document.querySelector('.btn').addEventListener('click', function (e) {
            console.log('False currentTarget: ' + e.currentTarget.nodeName);
            console.log('False target: ' + e.target.nodeName);
            console.log(e.eventPhase);
            console.log(this);
        }, false);

2. 取消默认行为 & 阻止事件冒泡

DOM:
event.preventDefault(); 
event.stopPropagation();
IE8以下:
event.returnValue = false;
event.cancelBubble = true;

return false方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
</head>
<body>

    <div onclick="alert('Outer clicked')">
        Outer Div<br><br>
        <a id="inner" href="http://www.google.com" onclick="return false;">Google</a>
    <script>
        document.getElementById('inner').addEventListener('click', function(e){
            alert(e.type);
            e.stopPropagation();
            return false;
        }, false);
        document.getElementById('inner').onclick = function(e){
            alert(e.type);
            e.stopPropagation();
            return false;
        };

        $('#inner').click(function (e) {
            return false;
        });
    </script>
</div>
</body>
</html>

在没有使用jquery的情况下，return false这种方式只有在DOM0的方式时可以相当于阻止默认行为的方法，DOM2级事件是不起任何效果的。

如果在jquery环境，return false相当于阻止默认行为和冒泡行为的方法，因为jquery本身的定义。

参考资料：

1. 前端工程师手册