经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。So,what are these?
事件绑定
在JavaScript中，有三种常用的绑定事件的方法：
1、在DOM元素中直接绑定
<button onclick="greet()">点我</button>
<script>
function greet(){
alert('Hello world!');
}
</script> `2、在JavaScript代码中绑定
<button id="btn1">点我</button>
<script>
document.getElementById('btn1').onclick = ()=>{
alert('Hello world!');
}
</script> 3、绑定事件监听函数
<button id='btn1'>点我</button>
<script>
document.getElementById('btn1').addEventListener('click',()=>{
alert('Hello world!');
})
</script>事件监听
关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。
W3C规范
element.addEventListener(event, function, useCapture)event : （必需）事件名，支持所有DOM事件。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
IE标准
element.attachEvent(event, function)event：（必需）事件类型。需加“on“，例如：onclick。
function：（必需）指定要事件触发时执行的函数。
<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
</script>优点
1、可以绑定多个事件。
传统
<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("hello 1"); //不执行
}
btn3.onclick = function () {
alert("hello 2"); //执行
}
</script>事件监听
<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click", hello1);
btn4.addEventListener("click", hello2);
function hello1() {
alert("hello 1");
}
function hello2() {
alert("hello 2");
}
</script>2、可以解除相应的绑定。
<input type="button" value="click me" id="btn5">
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click", hello1);//执行了
btn5.addEventListener("click", hello2);//不执行
btn5.removeEventListener("click", hello2);
function hello1() {
alert("hello 1");
}
function hello2() {
alert("hello 2");
}
</script>封装事件监听
<input type="button" value="click me" id="btn5">
<script>
//绑定监听事件
function addEventHandler(target, type, fn) {
if (target.addEventListener) {
target.addEventListener(type, fn);
} else {
target.attachEvent("on" + type, fn);
}
} //移除监听事件
function removeEventHandler(target, type, fn) {
if (target.removeEventListener) {
target.removeEventListener(type, fn);
} else {
target.detachEvent("on" + type, fn);
}
} //测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5, "click", hello1); //添加事件hello1 addEventHandler(btn5,"click",hello2);//添加事件hello2 removeEventHandler(btn5,"click",hello1);//移除事件hello1
</script>事件委托
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
</script> 优点
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。
<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click", function (event) {
var target = event.target;
if (target == item1) {
alert("hello item1");
} else if (target == item2) {
alert("hello item2");
} else if (target == item3) {
alert("hello item3");
}
})
</script>2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。
<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>
<script>
var list = document.getElementById("list");
document.addEventListener("click", function (event) {
var target = event.target;
if (target.nodeName == "LI") {
alert(target.innerHTML);
}
})
var node = document.createElement("li");
var textnode = document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>