JavaScript事件學(xué)習(xí)小結(jié)（一）事件流
相關(guān)閱讀：
JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件
http://www.fzitv.net/article/86259.htm
JavaScript事件學(xué)習(xí)小結(jié)（一）事件流
http://www.fzitv.net/article/86261.htm
javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）
http://www.fzitv.net/article/86262.htm
JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
http://www.fzitv.net/article/86264.htm
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對(duì)象
一、事件
事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之間的橋梁。
你若觸發(fā)，我便執(zhí)行——事件發(fā)生，調(diào)用它的處理函數(shù)執(zhí)行相應(yīng)的JavaScript代碼給出響應(yīng)。
典型的例子有：頁(yè)面加載完畢觸發(fā)load事件；用戶單擊元素，觸發(fā)click事件。
二、事件流
1、事件流感性認(rèn)識(shí)
問(wèn)題：?jiǎn)螕繇?yè)面元素，什么樣的元素能感應(yīng)到這樣一個(gè)事件？
答案：?jiǎn)螕粼氐耐瑫r(shí)，也單擊了元素的容器元素，甚至整個(gè)頁(yè)面。
例子：有三個(gè)同心圓，給每個(gè)圓添加對(duì)應(yīng)的事件處理函數(shù)，彈出對(duì)應(yīng)的文字。單擊最里面的圓，同時(shí)也單擊了外面的圓，所以外面圓的click事件也會(huì)被觸發(fā)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer{
position: absolute;
width: 400px;
height: 400px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle{
position: absolute;
width: 300px;
height:300px;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color:white;
}
#outer,#middle,#inner{
border-radius:100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle= document.getElementById("inner");
innerCircle.onclick= function () {
alert("innerCircle");
};
var middleCircle= document.getElementById("middle");
middleCircle.onclick=function(){
alert("middleCircle");
}
var outerCircle= document.getElementById("outer");
outerCircle.onclick= function () {
alert("outerCircle");
}
</script>
</body>
</html>
效果如下：
2、事件流
事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按照特定的順序傳播，路徑所經(jīng)過(guò)的所有節(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過(guò)程即DOM事件流。
事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。
冒泡型事件流：事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。即從DOM樹的葉子到根。
捕獲型事件流：事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。即從DOM樹的根到葉子。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html>
上面這段html代碼中，單擊了頁(yè)面中的<div>元素，
在冒泡型事件流中click事件傳播順序?yàn)?lt;div>—》<body>—》<html>—》document
在捕獲型事件流中click事件傳播順序?yàn)閐ocument—》<html>—》<body>—》<div>
note:
1）、所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實(shí)現(xiàn)中略有差別：
IE5.5及更早版本中事件冒泡會(huì)跳過(guò)<html>元素(從body直接跳到document)。
IE9、Firefox、Chrome、和Safari則將事件一直冒泡到window對(duì)象。
2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕獲。盡管DOM標(biāo)準(zhǔn)要求事件應(yīng)該從document對(duì)象開始傳播，但這些瀏覽器都是從window對(duì)象開始捕獲事件的。
3）、由于老版本瀏覽器不支持，很少有人使用事件捕獲。建議使用事件冒泡。
DOM事件流
DOM標(biāo)準(zhǔn)采用捕獲+冒泡。兩種事件流都會(huì)觸發(fā)DOM的所有對(duì)象，從document對(duì)象開始，也在document對(duì)象結(jié)束。
DOM標(biāo)準(zhǔn)規(guī)定事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。
事件捕獲階段：實(shí)際目標(biāo)（<div>）在捕獲階段不會(huì)接收事件。也就是在捕獲階段，事件從document到<html>再到<body>就停止了。上圖中為1~3.
處于目標(biāo)階段：事件在<div>上發(fā)生并處理。但是事件處理會(huì)被看成是冒泡階段的一部分。
冒泡階段：事件又傳播回文檔。
note:
1）：DOM標(biāo)準(zhǔn)規(guī)定事件捕獲階段捕獲涉及事件目標(biāo)，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會(huì)在捕獲階段出發(fā)事件對(duì)象上的事件。結(jié)果，就是有兩次機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件。
2）：并非所有的事件都會(huì)經(jīng)過(guò)冒泡階段 。所有的事件都要經(jīng)過(guò)捕獲階段和處于目標(biāo)階段，但是有些事件會(huì)跳過(guò)冒泡階段：如，獲得輸入焦點(diǎn)的focus事件和失去輸入焦點(diǎn)的blur事件。
兩次機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer{
position: absolute;
width: 400px;
height: 400px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle{
position: absolute;
width: 300px;
height:300px;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color:white;
}
#outer,#middle,#inner{
border-radius:100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle= document.getElementById("inner");
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在捕獲階段被觸發(fā)");
},true);
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在冒泡階段被觸發(fā)");
},false);
var middleCircle= document.getElementById("middle");
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在捕獲階段被觸發(fā)");
},true);
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在冒泡階段被觸發(fā)");
},false);
var outerCircle= document.getElementById("outer");
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在捕獲階段被觸發(fā)");
},true);
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在冒泡階段被觸發(fā)");
},false);
</script>
</body>
</html>
運(yùn)行效果就是會(huì)陸續(xù)彈出6個(gè)框，為說(shuō)明原理我整合成了一個(gè)圖：
3、事件流的典型應(yīng)用——事件代理
傳統(tǒng)的事件處理中，需要為每個(gè)元素添加事件處理器。js事件代理則是一種簡(jiǎn)單有效的技巧，通過(guò)它可以把事件處理器添加到一個(gè)父級(jí)元素上，從而避免把事件處理器添加到多個(gè)子級(jí)元素上。
事件代理的原理用到的就是事件冒泡和目標(biāo)元素，把事件處理器添加到父元素，等待子元素事件冒泡，并且父元素能夠通過(guò)target（IE為srcElement）判斷是哪個(gè)子元素，從而做相應(yīng)處理。關(guān)于target更多內(nèi)容請(qǐng)參考javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）下面舉例來(lái)說(shuō)明。
傳統(tǒng)事件處理，為每個(gè)元素添加事件處理器，代碼如下：
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
var colorList=document.getElementById("color-list");
var colors=colorList.getElementsByTagName("li");
for(var i=0;i<colors.length;i++)
{
colors[i].addEventListener('click',showColor,false);
};
function showColor(e)
{
e=e||window.event;
var targetElement=e.target||e.srcElement;
alert(targetElement.innerHTML);
}
})();
</script>
</body>
事件代理的處理方式，代碼如下：
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
var colorList=document.getElementById("color-list");
colorList.addEventListener('click',showColor,false);
function showColor(e)
{
e=e||window.event;
var targetElement=e.target||e.srcElement;
if(targetElement.nodeName.toLowerCase()==="li"){
alert(targetElement.innerHTML);
}
}
})();
</script>
</body>
總結(jié)一下事件代理的好處：
a、將多個(gè)事件處理器減少到一個(gè)，因?yàn)槭录幚砥饕v留內(nèi)存，這樣就提高了性能。想象如果有一個(gè)100行的表格，對(duì)比傳統(tǒng)的為每個(gè)單元格綁定事件處理器的方式和事件代理（即table上添加一個(gè)事件處理器），不難得出結(jié)論，事件代理確實(shí)避免了一些潛在的風(fēng)險(xiǎn)，提高了性能。
b、DOM更新無(wú)需重新綁定事件處理器，因?yàn)槭录韺?duì)不同子元素可采用不同處理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件處理函數(shù)即可，不需要重新綁定處理器，不需要再次循環(huán)遍歷。
以上所述是小編給大家介紹的JavaScript事件學(xué)習(xí)小結(jié)（一）事件流的相關(guān)知識(shí)，希望對(duì)大家有所幫助！
相關(guān)文章
JS+flash實(shí)現(xiàn)chrome和ie瀏覽器下同時(shí)可以復(fù)制粘貼
chrome和ie同時(shí)可以復(fù)制粘貼，想必大家一直思索的問(wèn)題在本文將有一個(gè)不錯(cuò)的實(shí)現(xiàn)，下面為大家介紹下JS+flash是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)
js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)2009-12-12
JS在TextArea光標(biāo)位置插入文字并實(shí)現(xiàn)移動(dòng)光標(biāo)到文字末尾
JS在TextArea光標(biāo)位置插入文字+移動(dòng)光標(biāo)到文字末尾，F(xiàn)irefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-03-03
這篇文章主要為大家介紹了webpack中使用zepto步驟方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
經(jīng)典模式和圣杯模式都是用于解決構(gòu)造函數(shù)繼承和原型繼承的問(wèn)題,但它們?cè)趯?shí)現(xiàn)繼承的方式上有所不同,本文主要來(lái)和大家聊聊經(jīng)典模式和圣杯模式下原型,原型鏈和繼承的實(shí)現(xiàn),需要的可以參考下2023-09-09
我們?cè)趯W(xué)到j(luò)s中數(shù)組的時(shí)候,我們會(huì)接觸到j(luò)s中數(shù)組的一些方法這些方法對(duì)我們來(lái)說(shuō),可以很便利的達(dá)到我們想要的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于javascript中搜索數(shù)組的四種方法,需要的朋友可以參考下2022-12-12
javascript顯式類型轉(zhuǎn)換實(shí)例分析
這篇文章主要介紹了javascript顯式類型轉(zhuǎn)換,實(shí)例分析了javascript實(shí)現(xiàn)類型轉(zhuǎn)換的常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要介紹了JavaScript內(nèi)存管理介紹,本文講解了內(nèi)存生命周期、JavaScript的內(nèi)存分配、通過(guò)函數(shù)調(diào)用的內(nèi)存分配、當(dāng)內(nèi)存不再需要使用時(shí)釋放等內(nèi)容,需要的朋友可以參考下2015-03-03