您好,登錄后才能下訂單哦!
這篇文章主要講解了“javascript的事件流怎么實(shí)現(xiàn)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“javascript的事件流怎么實(shí)現(xiàn)”吧!
javascript的事件流有:1、冒泡型事件流,事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo);2、捕獲型事件流,事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo);3、DOM事件流。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
事件是文檔或者瀏覽器窗口中發(fā)生的,特定的交互瞬間。
事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作,如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之間交互的橋梁。
你若觸發(fā),我便執(zhí)行——事件發(fā)生,調(diào)用它的處理函數(shù)執(zhí)行相應(yīng)的JavaScript代碼給出響應(yīng)。
典型的例子有:頁面加載完畢觸發(fā)load事件;用戶單擊元素,觸發(fā)click事件。
事件流描述的是從頁面中接收事件的順序。
1、事件流感性認(rèn)識(shí)
問題:單擊頁面元素,什么樣的元素能感應(yīng)到這樣一個(gè)事件?
答案:單擊元素的同時(shí),也單擊了元素的容器元素,甚至整個(gè)頁面。
例子:有三個(gè)同心圓, 給每個(gè)圓添加對(duì)應(yīng)的事件處理函數(shù),彈出對(duì)應(yīng)的文字。單擊最里面的圓,同時(shí)也單擊了外面的圓,所以外面圓的click事件也會(huì)被觸發(fā)。
<!DOCTYPE html> <html> <head> <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)過的所有節(jié)點(diǎn)都會(huì)收到該事件,這個(gè)傳播過程即DOM事件流。
1)、兩種事件流模型
事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型:捕獲型事件流和冒泡型事件流。
冒泡型事件流:事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。即從DOM樹的葉子到根。【推薦】
捕獲型事件流:事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。即從DOM樹的根到葉子。
事件捕獲的思想就是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而最具體的節(jié)點(diǎn)最后接收到事件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html>
上面這段html代碼中,單擊了頁面中的<p>元素,
在冒泡型事件流中click事件傳播順序?yàn)?strong><p>—》<body>—》<html>—》document
在捕獲型事件流中click事件傳播順序?yàn)?strong>document—》<html>—》<body>—》<p>
note:
1)、所有現(xiàn)代瀏覽器都支持事件冒泡,但在具體實(shí)現(xiàn)中略有差別:
IE5.5及更早版本中事件冒泡會(huì)跳過<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)、由于老版本瀏覽器不支持,很少有人使用事件捕獲。建議使用事件冒泡。
2)、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)(<p>)在捕獲階段不會(huì)接收事件。也就是在捕獲階段,事件從document到<html>再到<body>就停止了。上圖中為1~3.
處于目標(biāo)階段:事件在<p>上發(fā)生并處理。但是事件處理會(huì)被看成是冒泡階段的一部分。
冒泡階段:事件又傳播回文檔。
note:
1)、盡管“DOM2級(jí)事件”標(biāo)準(zhǔn)規(guī)范明確規(guī)定事件捕獲階段不會(huì)涉及事件目標(biāo),但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會(huì)在捕獲階段觸發(fā)事件對(duì)象上的事件。結(jié)果,就是有兩次機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件。
2)、并非所有的事件都會(huì)經(jīng)過冒泡階段 。所有的事件都要經(jīng)過捕獲階段和處于目標(biāo)階段,但是有些事件會(huì)跳過冒泡階段:如,獲得輸入焦點(diǎn)的focus事件和失去輸入焦點(diǎn)的blur事件。
兩次機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件例子:
<!DOCTYPE html> <html> <head> <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è)框,為說明原理我整合成了一個(gè)圖:
3、事件流的典型應(yīng)用事件代理
傳統(tǒng)的事件處理中,需要為每個(gè)元素添加事件處理器。js事件代理則是一種簡單有效的技巧,通過它可以把事件處理器添加到一個(gè)父級(jí)元素上,從而避免把事件處理器添加到多個(gè)子級(jí)元素上。
1)、事件代理
事件代理的原理用到的就是事件冒泡和目標(biāo)元素,把事件處理器添加到父元素,等待子元素事件冒泡,并且父元素能夠通過target(IE為srcElement)判斷是哪個(gè)子元素,從而做相應(yīng)處理。關(guān)于target更多內(nèi)容請(qǐng)參考javaScript事件(四)event的公共成員(屬性和方法) 下面舉例來說明。
傳統(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>
2)、事件代理的好處
總結(jié)一下事件代理的好處:
將多個(gè)事件處理器減少到一個(gè),因?yàn)槭录幚砥饕v留內(nèi)存,這樣就提高了性能。想象如果有一個(gè)100行的表格,對(duì)比傳統(tǒng)的為每個(gè)單元格綁定事件處理器的方式和事件代理(即table上添加一個(gè)事件處理器),不難得出結(jié)論,事件代理確實(shí)避免了一些潛在的風(fēng)險(xiǎn),提高了性能。
DOM更新無需重新綁定事件處理器,因?yàn)槭录韺?duì)不同子元素可采用不同處理方法。如果新增其他子元素(a,span,p等),直接修改事件代理的事件處理函數(shù)即可,不需要重新綁定處理器,不需要再次循環(huán)遍歷。
3)、事件代理的問題:【update20170502】
代碼如下:事件代理同時(shí)綁定了li和span,當(dāng)點(diǎn)擊span的時(shí)候,li和span都會(huì)冒泡。
<li><span>li中的span的內(nèi)容</span></li> <script> $(document).on('click', 'li', function(e){ alert('li li'); }); $(document).on('click', 'span', function(e){ alert('li span'); }) </script>
解決辦法:
方法一:span的事件處理程序中阻止冒泡
$(document).on('click', 'span', function(e){ alert('li span'); e.stopPropagation(); })
方法二:li的事件處理程序中檢測(cè)target元素
$(document).on('click', 'li', function (e) { if (e.target.nodeName == 'SPAN') { e.stopPropagation(); return; } alert('li li'); });
4)、事件代理的一個(gè)有趣應(yīng)用【update20170502】
點(diǎn)擊一個(gè)列表時(shí),輸出對(duì)應(yīng)的索引
<script> var ul=document.querySelector('ul'); var lis=ul.querySelectorAll('ul li'); ul.addEventListener('click', function (e) { var target= e.target; if(target.nodeName.toUpperCase()==='LI'){ alert([].indexOf.call(lis,target)); } },false) </script>
感謝各位的閱讀,以上就是“javascript的事件流怎么實(shí)現(xiàn)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)javascript的事件流怎么實(shí)現(xiàn)這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。