冒泡型事件
在牛腩新聞發(fā)布系統(tǒng)中，牛腩老師使用到了冒泡型事件，當(dāng)時(shí)是第一次見這個(gè)名詞，今天來學(xué)習(xí)一下什么是冒泡型事件。
冒泡機(jī)制
氣泡從水底開始往上升，由深到淺，升到最上面。在上升的過程中，氣泡會經(jīng)過不同深度層次的水。相對應(yīng)地：這個(gè)氣泡就相當(dāng)于我們這里的事件，而水則相當(dāng)于我們的整個(gè)dom樹；事件從dom 樹的底層，層層往上傳遞，直至傳遞到dom的根節(jié)點(diǎn)。當(dāng)子元素與父元素有相同的事件時(shí)，當(dāng)子元素被觸發(fā)時(shí)父元素也會被觸發(fā)冒泡機(jī)制
原型圖
在不同瀏覽器中，冒泡的程度不同：
IE 6.0:
div -> body -> html -> document
其他瀏覽器:
div -> body -> html -> document -> window
注意：
并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
當(dāng)子元素與父元素有相同的事件時(shí)，當(dāng)子元素被觸發(fā)時(shí)父元素也會被觸發(fā)冒泡機(jī)制。
冒泡事件，如下代碼：
HTML
<body><div id="father"><button id="btn">點(diǎn)擊</button></div> </body>CSS
father {width:300px;height:300px;background-color:red;margin:auto; }JS
window.onload = function () {var father = document.getElementById("father");var btn = document.getElementById("btn");btn.onclick = function () {alert("點(diǎn)擊了按鈕");};father.onclick = function () {alert("點(diǎn)擊了父標(biāo)簽");};document.onclick = function () {alert("點(diǎn)擊了文檔");}; }效果圖展示：
當(dāng)我們單擊點(diǎn)擊按鈕后，事件就會一層一層向上傳遞。
總結(jié)
- 上一篇： G1调优分析
- 下一篇： 手势识别智能传感器发展和未来的探究