JS html事件冒泡和事件捕獲操作示例

來源：懂視網責編：小采時間：2020-11-27 21:57:45

JS html事件冒泡和事件捕獲操作示例

JS html事件冒泡和事件捕獲操作示例:本文實例講述了JS html事件冒泡和事件捕獲操作。分享給大家供大家參考，具體如下：今天學習了事件冒泡和捕獲，記錄一下。 1.冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。我一般用法就是理解為觸發事件A, 會觸

推薦度：

點擊下載本文 文檔為doc格式

導讀JS html事件冒泡和事件捕獲操作示例:本文實例講述了JS html事件冒泡和事件捕獲操作。分享給大家供大家參考，具體如下：今天學習了事件冒泡和捕獲，記錄一下。 1.冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。我一般用法就是理解為觸發事件A, 會觸

本文實例講述了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"了。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS html事件冒泡和事件捕獲操作示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：事件 js 冒泡

熱門焦點

JS html事件冒泡和事件捕獲操作示例

JS html事件冒泡和事件捕獲操作示例

JS html事件冒泡和事件捕獲操作示例

最新推薦

猜你喜歡

熱門推薦