如何從處理程序中獲取事件處理程序所附的元素？

通常附接的事件處理程序的元素時，則可以使用傳遞到處理函數，像這樣的第一個參數的.TARGET構件訪問元素：如何從處理程序中獲取事件處理程序所附的元素？

button.on('click', function(e) { 
    alert(e.target); 
});

這將返回按鈕元件。

我想了解的問題是，當你有一個事件處理函數的內部元素，事件的目標是內部元素，而不是附加處理程序的內部元素。當我的事件處理程序需要訪問附加到外部元素的數據時，這是一個問題。

<div class="outer" data-tag="i-need-this-data"> 
    <b>Click Me</b> 
</div>

利用該標記，一個事件附着到.outer和點擊Click Me將導致event.target作爲<b>代替<div>。這是有問題的，因爲我必須使用變通方法來檢查外部類，爬上DOM直到看到.outer，然後以這種方式訪問數據。此行爲的一個示例可以在此JSFiddle中看到：https://jsfiddle.net/qce23qhw/

JSFiddle中的第一個示例顯示了不希望的行爲，單擊內部正方形會導致event.target成爲內部正方形。第二個示例顯示了我的解決方法的實現。

是否有一種更簡潔的方式從處理程序內部獲取處理程序所連接的元素，而不是單擊的元素？

來源

2016-08-11 Stephen Smith

只需使用循環中已使用的元素即可。 this也被設置爲當前元素：

$$('.two').each(function(element) { 
    element.on('click', function(e) { 
     alert(this.dataset.tag); 
    }); 
});

來源

2016-08-11 20:23:03 FrankerZ

我應該補充一點，我的目標是重用處理函數，因此它看起來像'element.on（'click'，handleClick）'，因此元素在'handleClick'內是未定義的。 –

@StephenSmith更新了我的回答 – FrankerZ

太棒了，我不能相信我忘記了這個。謝謝！ –

這被烘焙到on方法。它需要一個第二屬性，它的回調，這是迴應了該事件的對象：

document.on(‘click’, ‘.foo’, function(evt, elm){ 
    console.log(elm.inspect()); // -> elm is the element.foo that was clicked 
});

如果您正在使用：

$(‘some_id’).observe(‘click’, function(evt){ 
    console.log(this.inspect()); // -> this is the element#some_id that was clicked 
});

使用on幾乎總是更好，因爲它可以讓你從DOM中刪除你正在觀察的元素，替換它，並且仍然觀察它，而不用重新實例化觀察者。

來源

2016-08-12 00:46:21 Walter

這似乎並沒有解決我的問題，我想要附加處理程序的元素，而不是與之交互的特定元素。即當事件附加到'.outer'時，單擊'.inner'會導致'elm'被設置爲'.inner'，而不是'.outer'。 –

如何從處理程序中獲取事件處理程序所附的元素？

回答

相關問題