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>

事件监听

语法：
　element.addEventListener(event, function, useCapture)
　event : （必需）事件名，支持所有 DOM事件 。
　function：（必需）指定要事件触发时执行的函数。
　useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

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

*事件监听优点：*
　　 事件监听可以绑定多个事件，可以解除相应的绑定

事件委托

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

<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>    document.querySelector('#parent').addEventListener('click',function(e){        //e.target 被点击的元素        if(e.target && e.target.nodeName == 'SPAN'){            var idName = e.target.id;            console.log(idName + "was clicked!");        }    });</script>

*事件委托优点：*
　　 可以动态的为新添加的DOM元素添加事件