Question

我将eventlistener添加到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

这是错误的做法。不要将事件附加到单个元素，而是使用event delegation。前提很简单，您可以将一个事件侦听器附加到父元素并捕获子元素的所有事件，而不是很多事件。

说你的标记是这样的，并且动态添加/删除每个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的优点在于它会自行清理，无需一件事就可以分离事件监听器。

Aurelia removeEventListener来自动态添加的元素

1 个答案: