JavaScript第十一弹——事件流！事件代理！我懂了！
JavaScript第十一弹——事件流！事件代理！我懂了！
Hello小伙伴们，好久不见，最近实在太忙了，所以没有更！今天回来更文突然发现了一件尴尬的事情，两个第九弹哇，好像也改不了题目呀，那我们今天只能直接第十一弹了
今天要和大家聊一聊事件！先给大家送上几个小概念：
事件：事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。
事件流：事件流描述的是从页面中接收事件的顺序。
事件处理程序：响应某个事件的函数就叫做事件处理程序（事件侦听器）。
好啦，概念普及完了，我们要步入正文啦！
1
事件冒泡 vs 事件捕获
这一对兄弟时完全相反的。
1）事件冒泡：IE事件流，事件有具体元素接收，逐级向上传播到document的过程。
2）事件捕获：跟冒泡相反，不具体的节点先接收事件，具体节点后接收。
3）事件流：一个完整的DOM2事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段。首先事件捕获，为截获事件提供机会，然后是目标接收到事件，最后则是冒泡阶段，事件在这个阶段做出响应，
2
事件流的应用——事件代理
了解了什么事件流，大家一定会想，我要把这个东西放在哪里用呢？
举个?：假如说在一个ul中包含了n个li，要想给li添加事件，我们要怎样做呢？循环遍历获取li标签吗？这里我们就可以利用我们的事件流，给父级标签ul绑定事件。这就是事件代理！
事件代理就是通过冒泡原理实现的，像这个例子中，给ul绑定事件，那么ul的子标签li做事件的时候就会冒泡到ul上触发事件
<body>
<ul id="rabbitFamily">
<li>rabbit father</li>
<li>rabbit mother</li>
<li>rabbit</li>
<li>rabbit sister</li>
<li>rabbit brother</li>
</ul>
<script>
var rabbitFamily=document.getElementById("rabbitFamily");
rabbitFamily.addEventListener('click',showRole,false);
function showRole(ev)
{
ev = ev || window.event;
var targetElement = ev.target||ev.srcElement;
if(targetElement.nodeName.toLowerCase()==="li"){
alert(targetElement.innerHTML);
}
}
</script>
</body>
这是不是使得代码效率更高了呢，但是事件代理也并不是没有坑的，如果我们点击了父级节点，而又不希望冒泡到子节点呢，那么我们就要采用e.stopPropagation()来实现了
3
DOM0 DOM2 DOM3
不知道有没有细心的小伙伴发现我们前面提到过DOM2这样一个概念，有没有产生疑惑呢？
其实DOM经过发展，有了DOM0、DOM2、DOM3等版本，对于事件处理也有所不同。
1）DOM0: 直接通过on将事件绑定给DOM，如：
<div onclick="alert('rabbit')">Rabbit</div>
事件可以通过设置为null来移除。
2）DOM2: 通过addEventListener绑定事件，IE下通过attachEvent绑定，如：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
), false)
这种方式添加的事件只能通过removeEventListener()移除
这里要重点说一下这三个参数：要处理的事件名、作为事件处理程序的函数、true（捕获阶段调用）/false（冒泡阶段调用）
就是先说你要做什么，再说怎么做的，最后说啥时候做的！
3）DOM3: 新增一些新事件。
好啦，今天的事件到这里就结束啦，我们先白话了事件流，还记得事件代理吗，后面又介绍了DOM的好几个版本。此乃兔妞呕心沥血之作，喜欢就请关注加点击好看吧，越点越好看哦～～么么哒！！！