本文實例講述了html">JS html事件冒泡和事件捕獲操作。分享給大家供大家參考，具體如下：
今天學習了事件冒泡和捕獲，記錄一下。
1.冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
我一般用法就是理解為觸發事件A, 會觸發A的父親，爺爺，爺爺的父親......
代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>點擊事件捕獲冒泡實驗</title></head><body><div id="grandPa"> <div id="father"> <div id="son"> <input type="button" value="click"/> </div> </div></div><script type="text/javascript"> var father = document.getElementById('father'); father.addEventListener('click',function () { alert('fattther'); }) var son = document.getElementById('son'); son.addEventListener('click',function () { alert('son'); });</script></body></html>點擊button，會以此彈出"son", "father"。
2.捕獲事件：使用事件捕獲時，父級元素先觸發，子級元素后觸發。
我們使用addEventListener添加監聽事件時，參數分別為(事件類型, function(){}, capture), 一般不寫第三個參數時默認為false，即事件冒泡。
所以1中的代碼會是事件冒泡順序。如果我們想改為事件捕獲，把參數設置為true即可，代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>點擊事件捕獲冒泡實驗</title></head><body><div id="container"> <div id="father"> <div id="son"> <input type="button" value="click"/> </div> </div></div><script type="text/javascript"> var father = document.getElementById('father'); father.addEventListener('click',function () { alert('fattther'); },true) var son = document.getElementById('son'); son.addEventListener('click',function () { alert('son'); });</script></body></html>這樣當你點擊button后就會以此彈出"father", "son"了。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
