Javascript 无法将事件附加到上下文片段中的元素

我尝试将事件附加到上下文片段中的元素，然后将该元素附加到正文中。但这件事并没有引起重视

var range = document.createRange();
var listE1 = "<div>Hello World</div>"
range.selectNode(document.getElementsByTagName("div").item(0));
var element = range.createContextualFragment(listEl);

element.querySelector("div").addEventListener("click", function () {
    alert("hello");
}, true);

document.body.appendChild(element);

var range=document.createRange（）；
var list1=“你好，世界”
range.selectNode（document.getElementsByTagName（“div”）.item（0））；
var元素=range.createContextualFragment（listEl）；
element.querySelector（“div”）.addEventListener（“单击”），函数（）{
警惕（“你好”）；
}，对）；
document.body.appendChild（元素）；

---

在将这个元素添加到body之后，div根本没有任何事件

我在这里偶然发现了相同的答案，我知道这是一个非常古老的问题，希望这有助于或指向更好的方向

range.createContextualFragment（listEl）返回一个值。简而言之，DocumentFragment是最小化的DOM对象。它没有attachEventListener

如果您愿意，您可以使用或

下面是一个如何使用DOMParser的示例

let listE1 = "<div>Hello World</div>"
let element = new DOMParser().parseFromString(listE1 , 'text/html').documentElement;
element.addEventListener("click", function () {
    alert("hello");
}, true);

document.body.appendChild(element);

let list1=“你好，世界”
let element=new DOMParser（）.parseFromString（list1，'text/html'）.documentElement；
元素。addEventListener（“单击”，函数（）{
警惕（“你好”）；
}，对）；
document.body.appendChild（元素）；

希望这有帮助
 只有很多小错误，代码应该很容易运行：
我们应该将片段添加到文档中，然后添加事件侦听器


var range=document.createRange（）；
var list1=“你好，世界”
range.selectNode（document.getElementsByTagName（“div”）.item（0））；
var element=range.createContextalFragment（List1）；//列表->列表1
document.body.appendChild（元素）；//应该先添加到文档中
document.querySelector（“div#hello”）.addEventListener（“单击”，function（）{//element->document
警惕（“你好”）；
}，对）在您将事件添加到它们的主体之后尝试附加事件？如果我有这么多元素要附加事件（比如我使用循环），那么在附加到dom之后附加事件的成本会很高，对吗？如果您将许多元素添加到dom，那么无论如何都会很高。此外，除非在元素上使用特定的事件属性，否则不能在事件进入dom之前附加事件。有关更多信息，请参见此问题。