事件处理（1）—— 事件基础：事件流、绑定事件、注册与销毁事件、event对象、事件托管
事件基础
事件流
1、冒泡型（从内往外依次触发）
从最特定的目标向最不特定的目标（document对象）依次触发事件，也就是事件从下向上进行响应，这个过程被称为冒泡
示例 文档包含5层div元素，为它们定义相同的click事件，同时为每层div标签定义不同的类名。当单击div标签时，设计当前对象边框显示为红色虚线，同时抓取当前标签的类名，以此识别每个标签的响应顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
margin: 20px;
border: 1px solid blue;
font-size: 18px;
}
</style>
<script type="text/javascript">
function bubble() {
var div = document.getElementsByTagName("div")
var show = document.getElementById("show")
for (var i = 0; i < div.length; i++) {
//遍历div元素
div[i].onclick = (function(i) {
//为每个div元素绑定单击事件
return function() {
div[i].style.border = '1px dashed red'
show.innerHTML += div[i].className + "->"
}
})(i)
}
}
window.onload = bubble;
</script>
</head>
<body>
<div class="div-1">div-1
<div class="div-2">div-2
<div class="div-3">div-3
<div class="div-4">div-4
<div class="div-5">div-5
</div>
</div>
</div>
</div>
</div>
<p id="show"></p>
</body>
</html>
阻止事件冒泡
return function(event) {
div[i].style.border = '1px dashed red'
show.innerHTML += div[i].className + "->"
event.stopPropagation()
}
上述JavaScript代码等价于（jQuery代码）
$(function() {
$('div').click(function() {
$(this).css('border', '1px dashed red')
$('#show')[0] += $(this)[0].className
//return false; //阻止事件冒泡
})
})
2、捕获型（从外往内依次触发）
事件从最不特定的目标（document对象）开始被触发，最后到最特定目标，也就是事件从上往下进行响应
示例 修改上述示例，使用addEventListener()方法为5个div元素注册click事件，在注册事件时定义响应类型为捕获型事件，即设置第3个参数为true
for (var i = 0; i < div.length; i++) {
//遍历div元素
div[i].addEventListener('click', (function(i) {
return function() {
div[i].style.border = '1px dashed red'
show.innerHTML += div[i].className + "->"
}
})(i), true)
}
3、混合型
w3c的DOM事件模型支持捕获和冒泡型两种事件流，但是捕获事件流先发生，然后才发生冒泡型事件流。两种事件流触及DOM中所有层级对象，从document对象开始，最后返回document对象结束
绑定事件
<body>
//静态绑定
<button id="btn" onclick="alert('静态绑定')">按钮</button>
<script type="text/javascript">
//动态绑定
var btn = document.getElementById("btn")
/* btn.onclick = function() {
console.log("动态绑定")
} */
</script>
</body>
注册事件与销毁事件
在DOM模型中，通过调用对象的addEventListener()方法注册事件
element.addEventListener(String type,Function listener,boolean useCapture)
type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀
listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时，默认传递给他的唯一参数是event对象
useCapture：是一个布尔值。如果为true，则指定的事件处理函数将在事件传播的捕获阶段触发；如果为false，则事件处理函数在冒泡阶段触发
在DOM模型中，通过调用对象的removeEventListener()方法可用从指定对象中删除已经注册的事件处理函数
element.removeEventListener(String type,Function listener,boolean useCapture)
示例
<button type="button" id="a">点击</button>
<button type="button" id="b">删除</button>
<script type="text/javascript">
var a = document.getElementById('a')
var b = document.getElementById('b')
function ok() {
alert("欢迎光临！")
}
function remove_event() {
a.removeEventListener('click', ok, false)
}
a.addEventListener('click', ok, false)
b.addEventListener('click', remove_event, false)
</script>
removeElementListener()方法只能删除addEventListener()方法注册的事件。如果直接使用onclick等直接写在元素上的事件，将无法使用removeElementListener()方法删除
event对象
event对象由事件自动创建，代表事件的状态，如事件发生的源节点、键盘按键的响应状态、鼠标指针的移动位置、鼠标按键的响应状态等。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播
事件委托
事件委托，也称为事件托管，就是把目标节点的事件绑定到祖先节点上（原理：事件传播过程中，逐层冒泡总能被祖先节点捕获）
优点：优化代码。提升运行性能，防止在动态添加或删除节点的过程中注册的事件丢失
<ul id='list'>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
<script type="text/javascript">
var list=document.getElementById("list")
list.onclick=function(event){
console.log(event.target.innerText)
}
</script>
关键点：
1、事件绑定在祖先元素上
2、event.target：返回事件的目标节点（触发该事件的节点），不能使用this（代替的是ul，而不是某一个li）