如何在中間捕捉事件

Question

我想附加一個單擊事件偵聽器，並在此上下文中使用“ data-attr”運行一些操作，並且盡可能地優雅。

<div id="container">

    <div class="group" data-attr="info1">
        <div class="a-casual-class-1">***</div>
        <div class="a-casual-class-2">AAA</div>
    </div>

    <div class="group" data-attr="info2">
        <div class="a-casual-class-1">***</div>
        <div class="a-casual-class-2">AAA</div>
    </div>

</div>

A）到根只有一個事件（#container）

• 檢查event.target是a-casual-class-1還是a-casual-class-2，並獲取父元素以檢索data屬性或
• 從根目錄和數據屬性中檢索.group元素。

B）我可以先獲取“ .group”的節點列表，進行循環，然后將事件偵聽器附加到每個元素。

有沒有更好的方法來處理這種情況？

Answer 1

A）到根只有一個事件（#container）

您可以使用document.querySelectorAll()定位所有內部div。

B）我可以先獲取“ .group”的節點列表，進行循環並附加元素。

當您做出選擇器時，它將為您提供一個類似於dom節點對象的數組。 您必須遍歷它們並綁定事件。

因此，總體思路是，隨着事件在DOM中趨於冒泡，您可以將事件綁定在#container的子div上。 現在，每當您單擊.group的子div時，它將始終找到綁定了事件的div，並僅執行回調。

 var divs = document.querySelectorAll('#container > div'); // divs.forEach(function(div){ // it worked at chrome 57 [].forEach.call(divs, function(div){ // changed if user is on old version of browser div.addEventListener('click', function(e){ var data = this.dataset.attr; console.log(data); }); }); 

 <div id="container"> <div class="group" data-attr="info1"> <div class="a-casual-class-1">***</div> <div class="a-casual-class-2">AAA</div> </div> <div class="group" data-attr="info2"> <div class="a-casual-class-1">***</div> <div class="a-casual-class-2">AAA</div> </div> </div> 

Answer 2

A）到根只有一個事件（#container）

如果結構不太復雜，則可以將事件綁定到根目錄並檢查event.target的類以運行操作。

檢查event.target是a-casual-class-1還是a-casual-class-2，並獲取父元素以檢索data屬性或從根目錄和data-attr中檢索.group元素。

除了檢查a-casual-class-1 ，您還可以檢查父母的班級，然后采取措施。

例如：

 var target = document.getElementById('container'); target.addEventListener('click', doAction); function doAction(e) { if (e.target.className === 'group') { console.log(e.target.dataset.attr); } if (e.target.parentElement.className === 'group') { console.log(e.target.parentElement.dataset.attr); } } 

 #container { margin: 12p; padding: 12px; border: 4px solid #b33; } .group { margin: 12px; padding: 12px; border: 4px solid #33b; } .group > div { background-color: #ddd; } 

 <div id="container"> <div class="group" data-attr="info1"> <div class="a-casual-class-1">***</div> <div class="a-casual-class-2">AAA</div> </div> <div class="group" data-attr="info2"> <div class="a-casual-class-1">***</div> <div class="a-casual-class-2">AAA</div> </div> </div> 

B）我可以先獲取“ .group”的節點列表，進行循環，然后將事件偵聽器附加到每個元素。

如果標記和結構變得復雜，則最好使用querySelectorAll遍歷.groups ，然后將事件綁定到其中的每個事件。 這就是其他答案中顯示的內容。

---

底線：僅看代碼是否開始變得過於復雜，具體取決於標記結構的復雜性。 另外，您還需要考慮是否有其他事件處理程序綁定到#container嵌套的同級和/或子級。 在這種情況下，您可能會發現自己迷住了capture和/或stopPropagation 。