Aurelia 从动态添加的元素中删除 EventListener

Question

我将事件侦听器添加到Aurelia模板中的动态添加元素中。我现在需要在分离页面时从元素中删除侦听器。我需要一种方法来引用该元素，以便从中删除侦听器。

我知道 HTML 中的 ref 关键字，用于将元素引用到 VM - 所以也许这是解决它的方法。我尝试将其动态添加到元素中，但在源视图中看不到它。

见下文：

// this is the dynamically created element:
var cancelDiv = createDiv("cancel");
cancelDiv.addEventListener('click', this.DoSomething.bind(this));
// Trying to add attribute:
<element>.attributes["ref"] = <refValue>;
//or
<element>['ref'] = <refValue>;  

**通过查询 DOM 访问元素不是一个选项，因为该元素是模板的一部分，可能会在页面中出现多次

Answer 1

这是错误的方法。不要将事件附加到单个元素，而是改用事件委派。前提很简单，而不是将一个事件侦听器附加到父元素并捕获子元素的所有事件，而不是许多事件。

假设您的标记是这个，并且每个具有item类的 DIV 都是动态添加/删除的。

<template>
    <div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
</template>

你的方法是把事件放在每个孩子DIV上，这会给你带来很多痛苦。

您应该执行以下操作，使用 Aurelia的委托绑定：

<template>
    <div click.delegate="itemClicked($event)">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
</template>

然后在您的伴随视图模型中，创建上述方法并获取传递的事件：

export class MyClass {
    itemClicked(e) {
        console.log(e.target); // e.target is the target element, so any of the clicked children
    }
} 

delegate的好处是它会自行清理，分离事件侦听器而无需做任何事情。