添加动态创建的 web 元素的事件监听器

Question

我正在编写一个 chrome 扩展，它动态地确定点击的元素 xpath。 它使用 insertAdjacentHTML 函数（如下所示）创建一个文本区域 web 元素，并将单击的元素 xpath 放置到其中。

    document.body.insertAdjacentHTML('beforeend',this.html);
    //this.html is string version of text area web element

    document.addEventListener('click', this.getData, true);

上面的代码获取元素的xpath并将其放置到创建的文本区域。 我还想计算并显示与文本区域中的 xpath 匹配的元素数量（用户可以编辑文本区域）为此，我尝试为文本区域元素添加另一个事件侦听器，如下所示：

 var element= document.getElementById("inspector-text-area")
          element.addEventListener('change',function(e){
            console.log("event fired")
            ...
         });

运行扩展后，单击元素的 xpath 被放置到创建的文本区域 web 元素，但是当我编辑文本区域时，不会触发下一个添加的事件侦听器的函数。 我怎么了？ 谢谢..

Answer 1

它与事件捕获和事件冒泡有关