Js 事件原理與事件委托
事件原理三階段
捕獲(有外向內)、目標、冒泡(由內向外)
事件冒泡(event bubbling),即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收,然后逐級向上傳播到較為不具體的節點(文檔)。即子標簽發生事件后,向父級發送該事件,一直追溯到document。如:點擊一個嵌套在 body中的button,則該button的onclick事件也會傳遞給body、document中,觸發他們的onclick里觸發的函數。
案例
???? ????
????三階段原理過程:
阻止事件冒泡
當對子元素添加了事件偵聽后,執行的時候會觸發父元素相同類型的事件,此時需要阻止事件冒泡。
早期IE是沒有捕獲階段的,只有冒泡,cancelBubble為阻止冒泡。后來的stopPropagaiton,既有阻止冒泡的功能,也有阻止捕獲的功能,但如果譯為阻止傳播,那么跟cancel就是兩個東西了,所以還是叫做阻止冒泡。阻止事件冒泡(傳播)的方法是:
e.stopPropagation();通用
e.cancelBubble=true;僅適用在IE8及以下
擴展:
e.currentTarget 是事件偵聽事件對象(什么對象執行addEventListener函數就是誰)
e.target 事件的目標對象 真實點擊的最終目標對象
e.srcElement 事件的目標對象,兼容IE
事件函數中this默認等同于e.currentTarget,都是事件偵聽的對象
深度學習
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。