HTML元素列表上的事件侦听器

Question

DOM中有多个元素具有相同的类名"ps__rail-y"。我想迭代这些元素，用类监听单个元素上的点击事件，并停止事件传播。我尝试过下面的方法，但不知怎么的，它不起作用。

onClickScrollBar(){
let elements : Array<any> = this._elRef.nativeElement.querySelectorAll('.ps__rail-y');
elements.forEach((index : number) => {
let element = document.getElementsByClassName('ps__rail-y')[index] as HTMLElement;
element.addEventListener('click', (e : Event) => {
e.stopPropagation()
}, true)
})
}

Answer 1

第一个document.getElementsByClassName('ps__rail-y')[index]是非常糟糕的代码。

实际上，最好的做法是利用"；事件委托"；，其中你只在所有元素的祖先处设置一个事件处理程序；可能"；触发事件，并让事件冒泡到那个祖先。然后，当它在祖先处处理时，您可以引用event.target，它将引用启动事件的实际元素。通过这种方式，您只设置一个处理程序而不是多个处理程序，而且不需要任何循环。

这里有一个例子：

// Set up the handler at an ancestor
document.querySelector("section").addEventListener("click", function(event){
// Only act if the actual element that triggered the event
// has a certain class
if(event.target.classList.contains("foo")){
console.log("You clicked the " + event.target.nodeName + " element.");
}
});

<section>
<div class="foo">Click me</div>
<h1 class="foo">Click me</h1>
<div>Click me  <span>Click me</span></div>
<p>Click me</p>  
<a href="#" class="foo">Click me</a>  
</section>