javascript - 向从模板标签克隆的元素添加事件监听器

Question

我正在使用 <template> 创建很多 DOM 元素(每个元素都具有相同的 HTML 结构)标签:

<template id="weapon-template">
    <div class="button">
        <div class="button-price"  data-price ></div>
        <img class="button-image"  data-image >
        <div class="button-name"   data-name  ></div>
        <div class="button-damage" data-damage></div>
        <div class="button-amount" data-amount></div>
    </div>
</template>

...和几行 JavaScript:

var clone;
var template = document.getElementById( "weapon-template" );

template.content.querySelector( "[data-image]"  ).src = data.prev;
template.content.querySelector( "[data-price]"  ).innerHTML = data.cost + "$";
template.content.querySelector( "[data-name]"   ).innerHTML = data.name;
template.content.querySelector( "[data-damage]" ).innerHTML = data.damage;
template.content.querySelector( "[data-amount]" ).innerHTML = 0;

clone = document.importNode( template.content, true )
this.container.appendChild( clone );

我很乐意在克隆的元素上添加一些事件监听器。我无法从互联网上找到任何东西，我自己也厌倦了一些事情，比如:

template.content.querySelector( "[data-price]" ).addEventListener( "click", action, false );
clone.querySelector( "[data-price]" ).addEventListener( "click", action, false );

...这些都不起作用。我可以简单地做类似的事情:

var child  = this.container.childNodes[ 0 ];
var target = child.querySelector( "[data-price]" );

target.addEventListener( "click", action, false );

...但我想知道是否有另一种更简单的方法类似于那些对我不起作用的方法。

Answer 1

在您使用 document.importNode“激活”模板之前，它的内容是不属于 DOM 一部分的惰性节点。

根据 addEventListener 文档:

The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

因此，在您克隆模板内容并将它们添加到文档中的现有节点之前，在您的示例中添加事件监听器将不起作用。

如果您准备好使用 jQuery，则有一个解决方法。您可以使用 event delegation使用 jquery on 方法将事件绑定(bind)到父元素。

像这样:

$(this.container).on('click', '[data-price]', action);

这基本上是做什么的，即从 this.container 的子项触发的任何点击都会冒泡到父级。如果它满足 [data-price] 操作的选择器标准，将在其上触发。