利用事件代理，獲取事件中多個標簽/圖片中某一個

Dogee 發布于2019-08-26 10:23 / 3477人閱讀

摘要：事件捕獲會從開始觸發，一級一級往下傳遞，依次觸發，直到真正事件目標為止。父元素子元素事件代理原理事件冒泡機制。當子結點觸發事件時，事件流會向父節點傳播，并觸發父節點上的事件。

場景:一個頁面中的導航欄/圖片下拉框，具有多個相同的標簽節點，可以獲取點擊的某一個，并封裝對應的方法函數（不考慮IE）
需要考慮的步驟:
（1）事件代理的原理（事件冒泡）
（2）函數中需要考慮的幾點（默認行為，this指向）

1.事件捕獲和事件冒泡
DOM是一種樹形結構，事件會在元素結點和根結點之間傳遞，途經的結點會收到該事件，傳遞過程可以稱為事件流。
事件流分為三個階段：

捕獲階段

目標階段

冒泡階段

事件冒泡會從當前觸發的事件目標一級一級往上傳遞，依次觸發，直到document為止。
事件捕獲會從document開始觸發，一級一級往下傳遞，依次觸發，直到真正事件目標為止。
window->document->HTML->body->父元素->子元素

2.事件代理
（1）原理：事件冒泡機制。當子結點觸發事件時，事件流會向父節點傳播，并觸發父節點上的事件。
（2）優點：

代碼簡潔，當動態增加結點時，無需做額外操作

減少綁定注冊事件，減少瀏覽器內存消耗

3.函數實現
（1）實現一次事件冒泡

   /*
    *
    * 事件冒泡
    *
    */
    function bindEvent(elem, type, fn) {
         elem.addEventListener(type, fn);
    }
    var paras = document.getElementById("para")
    var contains = document.getElementById("contain")
    var p1s = document.getElementById("p1")
    console.log(paras, contains, p1s)
    bindEvent(p1s, "click", function(e) {
        e.preventDefault()
        //阻止事件冒泡 e.stopPropagation() e.cancelBubble = true IE
        console.log("p")
    })
    bindEvent(paras, "click", function(e) {
        console.log("para")
    })

可以看到，當點擊標簽的時候，結點的父元素也觸發了對應的方法。
（2）實現事件代理

   /*
    *
    * 事件代理
    *
    */
    function eventProxy(elem, type, proxyElem, fn) {
        if(fn === null) { // 不使用事件代理
            fn = proxyElem;
            proxyElem = null;
        }
        elem.addEventListener(type, function(e) {
            var target;
            if(proxyElem) { // 使用事件代理的情況
                target = e.target;
                console.log(target)
                if (target.matches(proxyElem)) {
                    fn.call(target, e); // 改變函數this執行上下文到目標結點
                }
            } else { // 不使用事件代理的情況
                fn(e);
            }
        })
    }
    var proxyContainer = document.getElementById("proxy");
    eventProxy(proxyContainer, "click", "a" , function(e) {
        e.preventDefault();
        console.log(this.innerHTML); // 獲取當前結點信息
    })

可以看到，通過事件代理的方式，將事件綁定在父節點上，并可以區分被點擊分子節點的信息。

云服務器 GPU云服務器多個事件處理事件代理事件的一個 js 標簽綁定事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106101.html

jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
JavaScript-面試

摘要：表示沒有對象，即該處不應該有值。閉包的形成允許使用內部函數，可以將函數定義和函數表達式放在另一個函數的函數體內。使用閉包可以減少全局環境的污染，也可用延續變量的生命。所以在閉包不用之后，將不使用的局部變量刪除，使其被回收。 1.javaScript的數據類型有什么 Undefined、Null、Boolean、Number、String 2.檢測數據類型有什么方法 typeof typ...

fantix 2019-08-23 10:37 評論0 收藏0
前端面試題目匯總

摘要：線程在執行過程中與進程還是有區別的。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。關于js 1.原型鏈 2.AJAX請求數據時解決緩存的辦法3.js的繼承 ...

lastSeries 2019-08-21 11:42 評論0 收藏0
JavaScript 基礎知識 - DOM篇(一)

摘要：前言本篇文章是基礎知識的篇，如果前面的基礎知識入門篇看完了，現在就可以學習了。基本概念分為三個部分。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 評論0 收藏0
異步、DOM、事件、頁面加載和優化面試題及知識點簡單總結

摘要：異步編程，不同于同步編程的請求響應模式，其是一種事件驅動編程，請求調用函數或方法后，無需立即等待響應，可以繼續執行其他任務，而之前任務響應返回后可以通過狀態通知和回調來通知調用者。異步與單線程知識點：什么是異步(對比同步) 同步：一行一行按順序依次執行代碼，當前代碼任務耗時執行會阻塞后續代碼的執行。這是一種典型的請求-響應模型，當請求調用一個函數或方法后，需等待其響應返回，然后執...

jasperyang 2019-08-21 16:57 評論0 收藏0