小张与js事件流模型

别焦虑！

事件捕获事件冒泡阻止事件冒泡的方式

事件捕获

捕获型事件（event caturing）：事件从最不精确的对象（document）开始触发，然后到最精确；但如果开发人员指定了，也可以在窗口级别捕获事件

示例：

<div> <input type="button" value="捕获"/> </div> var $input=document.getElementsByTagName("input")[0]; var $div=document.getElementsByTagName("div")[0]; var $body=document.getElementsByTagName("body")[0]; $input.addEventListener("click",function(){ this.style.border="5px solid red" alert("red"); },true) $div.addEventListener("click",function(){ this.style.border="5px solid green" alert("green"); },true) $body.addEventListener("click",function(){ this.style.border="5px solid yellow" alert("yellow"); },true) //依次弹出 yellow->green->red //addEventListener()如果第三个参数为false，则为冒泡

事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标（document）的顺序触发

示例：

<div> <input type="button" value="测试事件冒泡"/> </div> var $input=document.getElementsByTagName("input")[0]; var $div=document.getElementsByTagName("div")[0]; var $body=document.getElementsByTagName("body")[0]; $input.onclick=function(e){ this.style.border="5px solid red"; var e=e||window.e; alert("red"); } $div.onclick=function(e){ this.style.border="5px solid green"; alert("green"); } $body.onclick=function(e){ this.style.border="5px solid yellow"; alert("yellow"); } //依次弹出 red->green->yellow

阻止事件冒泡的方式

event.stopPropagation() 只阻止事件向上冒泡，不阻止事件本身

$("#div1").mousedown(function(e){ var e=e||window.e; if(e&&e.stopPropagation){ e.stopPropagation();//阻止事件冒泡 }else{ e.cancelBubble=true;//IE } });

return false 不仅阻止事件往上冒泡，还阻止了事件本身

$("#div1").mousedown(function(event){ return false; });