JS事件机制：事件绑定、事件监听、事件委托(代理)和事件执行顺序总结

JS 对于用户的操作做出响应,就必须对DOM元素绑定事件处理函数

事件绑定

　1、在DMO中直接绑定事件

<input type="button" value="click me" onclick="hello()"/>
<script>
    function hello(){alert("Hello world!");}
</script>

　2、在js代码中绑定事件

<input type="button" value="click me" id="btn" />
<script>
    document.querySelector("#btn").onclick = function(){
        alert("Hello world!");
    }
</script>

备注：
　１、只会在事件冒泡中运行；一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数会覆盖旧的事件处理函数；实际代码中很少使用；
　２、处理事件时，this关键字引用的是当前元素

事件监听

语法：
　element.addEventListener(event, function, useCapture)
　event : （必需）事件名，支持所有 DOM事件 。
　function：（必需）指定要事件触发时执行的函数。
　useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
　
备注：
　1、同一个事件处理函数可以绑定2次，一次冒泡,一次捕获；相同的事件处理函数可以绑定多次，并且顺序执行

<input type="button" value="click me" id="btn" />
<script>
    document.querySelector("#btn").addEventListener("click",function(){
        alert("Hello world!");
    },false);
    document.querySelector("#btn").addEventListener("click",function(){
        alert("Hello world!");
    },true);
</script>

2、在事件处理函数内部，this关键字引用当前元素
３、IE不支持，你必须使用IE的attachEvent函数替代： element.attachEvent(‘onclick’, function(){});

事件委托

　事件委托：利用冒泡原理，将事件加到父元素或者祖先元素上

<div id="parent">
    <span id="item_1">呵呵哒</span>
    <span id="item_2">呵呵哒</span>
    <div id="item_3">呵呵哒</div>
    <p id="item_4">呵呵哒</p>
</div>
<script>
    //等价于 $('#parent').on('click',function(e).......
    document.querySelector('#parent').addEventListener('click',function(e){
        //e.target 真正发生事件的DOM元素 e.currentTarget 当前事件发生的DOM元素
        if(e.target && e.target.nodeName == 'SPAN'){
            var idName = e.target.id;
            console.log(idName + "was clicked!");
        }
    });
</script>

备注：
动态为新添加的DOM元素添加事件

事件执行顺序

DOM事件流
　将事件分为三个阶段：捕获阶段–>目标阶段–>冒泡阶段
　
　事件函数执行顺序结论：捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行。
阻止事件冒泡和捕获
　e.stopPropagation()
阻止默认行为
　e.preventDefault()
onclick,click,on()事件触发顺序
　onclick>click>on()
　.click() 、on(‘click’) 区别
　　.click(): 只支持绑定静态元素
　　on(‘click’): 支持动态绑定元素(selector必须是目标绑定元素的父元素)
　　 $(selector).on(‘click’,function(){});

参考资料：事件冒泡、事件捕获和事件委托