事件流是指在开发过程中当有外界元素触发事件时，该元素的容器控件及整个页面都按照特定顺序的响应该元素的触发事件，也通常指触发的顺序 其中又分为 A、冒泡型事件流 B、 捕获型事件流 C、 DOM事件流
A 先分析冒泡事件流
冒泡事件流其实就是IE提供的事件流，当然这样理解也不够全面， 而冒泡流的核心主要是依照 触发事件的控制的父控件的层及顺序依次触发，
既事件由明确的事件源到其最不明确的事件源依次 触发，最不明确的一定是document对象，（通过stopPropagation阻止冒泡 新式浏览器）如：
<script type="text/javascript"> function gel(id) { return document.getElementById(id); }; window.onload = function () { //在事件参数里的 currentTarget 就相当于 this ! // target 就是 当前用户操作的 对象 //如果点了 最里面的 div3，那么 就回依次执行 div3->div2->div1的onclick方法 //方法中 的 evt.target 都等于 div3 gel("div1").onclick = function (evt) { alert(this.id + ",evt.currentTarget=" + evt.currentTarget.id + ",evt.target=" + evt.target.id); }; gel("div2").onclick = function (evt) { alert(this.id + ",evt.currentTarget=" + evt.currentTarget.id + ",evt.target=" + evt.target.id); }; gel("div3").onclick = function (evt) { alert(this.id + ",evt.currentTarget=" + evt.currentTarget.id + ",evt.target=" + evt.target.id); }; } </script></head><body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body> |
B、捕获对象流
捕获事件流的主要思想是，依照触发事件对象的根节点依次触发，直接触发明确的事件源对象 实际上捕获型事件流的实现和冒泡事件流是相反的，简单描述，当触发事件对象时，是先从document对象往上明确的触发事件对象依次捕获。通过代码来帮助理解，如下
<script type="text/javascript"> function gel(id) { return document.getElementById(id) }; window.onload = function () { //false表示冒泡 true 表示捕获 gel("bnt").addEventListener("click", getname2, false); gel("bnt").addEventListener("click", getname, true); gel("div").addEventListener("click", getname, true); gel("div").addEventListener("click", getname2, false); document.body.addEventListener("click", getname2, false); document.body.addEventListener("click", getname, true); } function getname() { alert("扑获阶段" + this.tagName); } function getname2() { alert("冒泡阶段"+this.tagName); } </script></head><body style="border:1px solid#808080"> <div id="div" style="border:1px solid#00ffff"> <input id="bnt" type="button" value="2级事件"/> </div></body>a.先执行事件捕捉阶段，把 触发事件元素 的所有的父元素 由外向里 执行一遍同名事件；b.中间执行 触发事件元素 的 同名0级事件和2级事件；（注：此处按照代码顺序执行）c.再执行事件冒泡阶段，由里到外 执行同名事件；（注：此处如果有0级事件，则冒泡和0级事件按照代码顺序来执行） |
C、 DOM事件流
其实就是在冒泡事件流和捕获事件流的基础上同时也考虑了0级机制和2级机制的是事件流处理 冒泡事件流和捕获事件流，这两种事件流都会触发DOM中的所有对象，代码如上。DOM事件流最独特的地方时在于文本节点也会触发事件，但在IE并不完全会支持DOM标准所以IE中的文本节点， 并不能触发节点，但在Firefox中，对DOM的事件是比较敏感的，所以令很多开发者在处理事件流开发中对Firefox敬而远之。