javascript事件冒泡簡單示例
本文實例講述了javascript事件冒泡的定義與用法。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>Bubble in JavaScript DOM</title> <style type="text/css" media="screen"> div * { display: block; margin: 4px; padding: 4px; border: 1px solid white; } textarea { width: 20em; height: 2em; } </style> <script type="text/javascript"> //<![CDATA[ function init(){ var log = document.getElementsByTagName('textarea')[0]; var all = document.getElementsByTagName('div')[0].getElementsByTagName('*'); for (var i = 0, n = all.length; i < n; ++i) { all[i].onmouseover = function(e){ this.style.border = '1px solid red'; log.value = '鼠標(biāo)現(xiàn)在進入的是: ' + this.nodeName; }; all[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*'); for (var i = 0, n = all2.length; i < n; ++i) { all2[i].onmouseover = function(e){ this.style.border = '1px solid red'; if (e) //停止事件冒泡 e.stopPropagation(); else window.event.cancelBubble = true; log.value = '鼠標(biāo)現(xiàn)在進入的是: ' + this.nodeName; }; all2[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } } window.onload = init; //]]> </script> </head> <body> <h1>Bubble in JavaScript DOM</h1> <p> DOM樹的結(jié)構(gòu)是: </p> <pre><code> UL - LI - A - SPAN </code></pre> <div> <ul> <li> <a href="http://www.dbjr.com.cn/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="http://www.dbjr.com.cn/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <textarea> </textarea> <p> 鼠標(biāo)進入UL的任何一個子元素,如果不停止冒泡,我們從UL到SPAN都定義了鼠標(biāo)懸停( <code> mouseover </code>)事件,這個事件會上升了UL,從而從鼠標(biāo)所進入的元素到UL元素都會有紅色的邊。 </p> <div> <ul> <li> <a href="http://www.dbjr.com.cn/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="http://www.dbjr.com.cn/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <p> 如果停止冒泡,事件不會上升,我們就可以獲取精確的鼠標(biāo)進入元素。 </p> </body> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JS檢索下拉列表框中被選項目的索引號(selectedIndex)
這篇文章主要介紹了JS檢索下拉列表框中被選項目的索引號(selectedIndex),本文通過實例代碼圖文詳解的形式給大家介紹的非常詳細,需要的朋友可以參考下2019-12-12IE event.srcElement和FF event.target 功能比較
可以捕獲當(dāng)前事件作用的對象,如event.srcElement.tagName可以捕獲活動標(biāo)記名稱。2010-03-03Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
內(nèi)建函數(shù)其實就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時的工作中,相信大家使用的場景并不多,這篇文章給大家詳細介紹了函數(shù)reduce的應(yīng)用以及多重疊加,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10兩種JavaScript的AES加密方式(可與Java相互加解密)
這篇文章主要介紹了兩種JavaScript的AES加密方式(可與Java相互加解密) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08JavaScript 異步調(diào)用框架 (Part 1 - 問題 & 場景)
在Ajax應(yīng)用中,調(diào)用XMLHttpRequest是很常見的情況。特別是以客戶端為中心的Ajax應(yīng)用,各種需要從服務(wù)器端獲取數(shù)據(jù)的操作都通過XHR異步調(diào)用完成。2009-08-08JavaScript中var let const的用法有哪些區(qū)別
在ES6(ES2015)出現(xiàn)之前,JavaScript中聲明變量就只有通過var關(guān)鍵字,函數(shù)聲明是通過function關(guān)鍵字,而在ES6之后,聲明的方式有var、let、const、function、class,本文主要討論var、let和const之間的區(qū)別2021-10-10