DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> JavaScript實現父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執行順序的方法
JavaScript實現父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執行順序的方法
編輯:JavaScript技巧     

本文實例講述了Javascript實現父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執行順序的方法。分享給大家供大家參考,具體如下:

事件的執行順序絕對是讓人頭疼的問題。當父元素與子元素都綁定了多個事件,且有的綁定在冒泡階段、有的綁定在捕獲階段時,事件的觸發順序如何?如果你只關心這個問題,請直接下滑到3. 綁定多個事件,且由用戶行為觸發。如果你想細致了解Javascript中的事件發生,請慢慢閱讀。

1. 原生事件的發生順序

一般來講,當為一個a標簽添加click事件以後,點擊這個標簽,會先執行綁定的事件、後跳轉頁面。一個input綁定blur事件以後,你在input裡輸入完內容,點擊提交按鈕,會先發生blur事件,後發生click事件。當然,這是一般來講。我在一個React項目中曾經發生表單提交時,先發生click事件,blur事件沒有來得及發生,造成表單內容沒有檢驗就提交到後台,原因我至今沒有找到,解決辦法是在click事件上加一個50ms的延遲。

2. 自定義事件

Javascript中也支持手動觸發事件,請看下面代碼。

a.addEventListener('click', function(){
  console.log(input.value);
  console.log(this.getAttribute('href'));
  console.log(location.href);
}, false); //a是我已經通過id獲得好的一個a標簽
var event = document.createEvent('HTMLEvents'); // initEvent接受3個參數: 事件類型,是否冒泡,是否阻止浏覽器的默認行為
event.initEvent('click', true, true);
event.eventType = 'click';
//觸發a上綁定的自定義事件
a.dispatchEvent(event);
//注:jQuery中有更簡單的trigger()方法實現自定義事件功能

Javascript中自定義事件的類型有(即document.createEvent('HTMLEvents')中的參數):

1. UIEvents:一般化的UI事件。
2. MouseEvents:一般化的鼠標事件。
3. MutationEvents:一般化的DOM變動事件。
4. HTMLEvents:一般化的HTML事件。

自定義事件的發生比較容易控制,你什麼時候觸發(dispatchEvent/fireEvent)它,它就什麼時候發生。

3. 綁定多個事件,且由用戶行為觸發

這個情況最復雜,也是標題中的情況:父元素與子元素都綁定多個事件,且有的事件在捕獲階段、有的事件在冒泡階段。

下面這個例子,父元素div綁定兩個事件(一個冒泡階段、一個捕獲階段),子元素也是這種情況。事件觸發順序如何。

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function(){
  console.log('bubble','btn');
},false);
btn.addEventListener('click', function(){
  console.log('capture','btn');
},true);
div.addEventListener('click', function(){
  console.log('bubble','div');
},false);
div.addEventListener('click', function(){
  console.log('capture','div');
},true);

執行結果:

乍一看這個結果有些亂,但仔細分析可以得出結論

綁定在被點擊元素的事件是按照代碼順序發生,其他元素通過冒泡或者捕獲“感知”的事件,按照W3C的標准,先發生捕獲事件,後發生冒泡事件。所有事件的順序是:其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。

更多關於Javascript相關內容感興趣的讀者可查看本站專題:《Javascript事件相關操作與技巧大全》、《Javascript時間與日期操作技巧總結》、《Javascript切換特效與技巧總結》、《Javascript查找算法技巧總結》、《Javascript動畫特效與技巧匯總》、《Javascript錯誤與調試技巧總結》、《Javascript數據結構與算法技巧總結》、《Javascript遍歷算法與技巧總結》及《Javascript數學運算用法總結》

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved