addEventListener 不适用于由 createElement 创建的元素

Question

const append = ({ el, children }) => {
const child = document.createRange().createContextualFragment(children);
el.appendChild(child);
};
const element = function (elType, children, options = {}) {
const el = document.createElement(elType);
const { onClick } = options;
if (onClick) {
console.log(el, "el");
el.addEventListener("click", (e) => {
onClick(e);
});
}
if (Array.isArray(children)) {
children.map((child) => {
append({ el, children: child });
});
} else {
append({ el, children });
}
return el.outerHTML;
};
export default element;

上面你可以看到我的element函数，我将用它来创建一些类型的元素，对于我的例子，我对按钮元素感兴趣，我想开始监听按钮元素上的点击事件，检查下面的代码

element("div", [
element("button", "Home page", {
onClick: () => console.log("click"),
}),
children,
]);

但是当我点击我的按钮时，它不工作，这是什么原因呢?

Answer 1

从文档中可以看到

Element DOM接口的outerHTML属性获取描述元素及其后代的序列化HTML片段

因此，返回代表元素的HTML，但它不是元素。

您应该返回el，并使用appendChild:

const element = function (elType, children, options = {}) {
...
return el;
};
document.querySelector('...')(
element("div", [
element("button", "Home page", {
onClick: () => console.log("click"),
}),
children,
])
)