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元素添加事件