摘要:事件冒泡的事件流叫做事件冒泡。事件委托又稱事件代理。對事件處理程序過多問題的解決方案就是事件委托。所有用到按鈕的事件多數(shù)鼠標和鍵盤事件都適合采用事件委托。
事件冒泡
IE的事件流叫做事件冒泡。顧名思義當事件發(fā)生后,事件就開始從里向外傳播,查看下方代碼:
Document
如果點擊頁面中的
click 事件 在 直系DOM 樹的每一級節(jié)點都會發(fā)生(自下而上),直到 document 對象。
事件委托又稱事件代理。對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡,只指定一個父類事件處理程序,就可以管理某一類型的所有子類元素事件。
三個
document.getElementById("sayHi").onClick(function(){...})
點擊事件不多的情況下還好,若是所有元素都采用這樣的方式,結(jié)果就會有數(shù)不清的代碼用于添加事件處理。就好比一萬個人全擠到公司前臺去拿快遞,那場面,蔚為壯觀?。〉前芽爝f放到前臺,前臺接收,然后分批次派送,就會舒服很多:
document.getElementById("myList").onClick(function(ev){ var e = ev || window.event; var target = e.target; switch (target.id) { case "goSth": ... break; case "doSth": ... break; ... } })
上面是用事件委托的方式,子元素是帶有事件效果的,我們可以發(fā)現(xiàn),當用事件委托的時候,根本就不需要去遍歷元素的子節(jié)點,只需要給父級元素添加事件就好了,子元素點擊,會通過以事件冒泡的方式激活父元素已添加的相同事件,減少了很多 js 對于 dom 的事件操作,占用更少的內(nèi)存,這大概是事件委托的精髓所在。
所有用到按鈕的事件(多數(shù)鼠標和鍵盤事件)都適合采用事件委托。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/94920.html
摘要:見下圖更直觀在事件流中,事件的目標在捕獲階段不會接受到事件,這意味著在捕獲階段,事件從到后就停止了。下一個階段是目標階段,于是事件在上發(fā)生,并在事件處理中被看成是冒泡階段的一部分,然后,冒泡階段發(fā)生,事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流? 事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...
摘要:見下圖更直觀在事件流中,事件的目標在捕獲階段不會接受到事件,這意味著在捕獲階段,事件從到后就停止了。下一個階段是目標階段,于是事件在上發(fā)生,并在事件處理中被看成是冒泡階段的一部分,然后,冒泡階段發(fā)生,事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流? 事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...
摘要:見下圖更直觀在事件流中,事件的目標在捕獲階段不會接受到事件,這意味著在捕獲階段,事件從到后就停止了。下一個階段是目標階段,于是事件在上發(fā)生,并在事件處理中被看成是冒泡階段的一部分,然后,冒泡階段發(fā)生,事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流? 事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...
摘要:事件監(jiān)聽函數(shù)標準的事件監(jiān)聽函數(shù)如下上面的示例表示先獲得表示節(jié)點的對象,然后在這個對象上面添加了一個事件監(jiān)聽器,當監(jiān)聽到事件發(fā)生時,則調(diào)用回調(diào)函數(shù),即在控制臺輸出。 JavaScript 事件解讀 1. 事件基本概念 事件是指在文檔或者瀏覽器中發(fā)生的一些特定交互瞬間,比如打開某一個網(wǎng)頁,瀏覽器加載完成后會觸發(fā) load 事件,當鼠標懸浮于某一個元素上時會觸發(fā) hover 事件,當鼠標點擊...
摘要:最近在深入實踐中,遇到了一些問題,比如我需要為動態(tài)創(chuàng)建的元素綁定事件,那么普通的事件綁定就不行了,于是通過上網(wǎng)查資料了解到事件委托,因此想總結(jié)一下中的事件綁定與事件委托。事件冒泡認為事件促發(fā)的最深層元素首先接收事件。 最近在深入實踐js中,遇到了一些問題,比如我需要為動態(tài)創(chuàng)建的DOM元素綁定事件,那么普通的事件綁定就不行了,于是通過上網(wǎng)查資料了解到事件委托,因此想總結(jié)一下js中的事件綁...
閱讀 830·2021-07-25 21:37
閱讀 3714·2019-08-30 15:55
閱讀 2639·2019-08-30 15:54
閱讀 1802·2019-08-30 15:44
閱讀 3175·2019-08-30 15:44
閱讀 920·2019-08-30 15:43
閱讀 1128·2019-08-29 15:36
閱讀 3127·2019-08-29 10:58