DOM事件流

時間 2019-11-08

標籤 dom 事件欄目 HTML 简体版

原文原文鏈接

DOM事件流描述的是從頁面中接收事件的順序；事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即 DOM 事件流！javascript

一.DOM事件流

好比咱們給一個div註冊了一個點擊事件：html

DOM事件流分爲3個階段：java

捕獲階段
當前目標階段
冒泡階段

事件冒泡： IE 最先提出，事件開始時由最具體的元素接收，而後逐級向上傳播到到 DOM 最頂層節點的過程。性能

事件捕獲：網景最先提出，由 DOM 最頂層節點開始，而後逐級向下傳播到到最具體的元素接收的過程。spa

須要注意：代理

JS 代碼中只能執行捕獲或者冒泡其中的一個階段。
onclick 和 attachEvent 只能獲得冒泡階段。
addEventListener(type, listener[, useCapture])第三個參數若是是 true，表示在事件捕獲階段調用事件處理程序；若是是 false（不寫默認就是false），表示在事件冒泡階段調用事件處理程序。
實際開發中咱們不多使用事件捕獲，咱們更關注事件冒泡。
有些事件是沒有冒泡的，好比 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的作某些事件，因此它有利也有弊。

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //  冒泡階段:若是addEventListener第三個參數是 false 或者省略那麼則處於冒泡階段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>
複製代碼

代碼執行結果：code

二.阻止事件冒泡

標準寫法：利用事件對象裏面的 stopPropagation()方法cdn

e.stopPropagation()htm
非標準寫法：IE 6-8 利用事件對象 cancelBubble 屬性對象

e.cancelBubble = true

三.事件委託

事件委託：稱爲事件代理，在 jQuery 裏面稱爲事件委派。
事件委託的原理：不是每一個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，而後利用冒泡原理影響設置每一個子節點。
事件委託做用：咱們只操做了一次 DOM ，提升了程序的性能。

<body>
    <ul>
        <li>
            <div>事件委託</div>
        </li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 這個能夠獲得咱們點擊的對象
            e.target.style.backgroundColor = 'purple';
        })
    </script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。