如何将eventListener添加到webpack模块中的元素中

Question

我有javascript应用程序构建模块。我正在使用webpack。我想给元素添加eventlistener。但是我做不到。我收到错误"ReferenceError: x is not defined"。在我的应用程序中，我应该放置我的eventlistener函数。它工作，如果我写函数内联，但我不想这样做。

这是我的app.js文件(入口点)。

import {Main} from "./components/Main";
import './style.css'
export default (function () {
document.getElementById("app").innerHTML = Main();
}());

组件的元素我想有eventlistener - onclick元素:

import {CompanyContainer} from "./CompanyContainer";
export const UserContainer = user => {
return (
`
<a href="#" onclick="">${user.getFullName()}</a>
<div class="user-details hide">
<p>Birthday: ${user.getBirthDay()}</p>
<p><img src="" width="100px"></p>
${CompanyContainer(user.companyId)}
</div>
`
)
};

Answer 1

思路:

const e = document.createElement('div');
e.innerHTML = yourHTMLCode;
e.querySelector('a').addEventListener('click', yourListenerFunction);

编辑:我会这样重写你的组件:

import {CompanyContainer} from "./CompanyContainer";
export const UserContainer = (user, onClick) => {
const html = `
<a href="#">${user.getFullName()}</a>
<div class="user-details hide">
<p>Birthday: ${user.getBirthDay()}</p>
<p><img src="" width="100px"></p>
${CompanyContainer(user.companyId)}
</div>
`;
const element = document.createElement('div');
element.innerHTML = html;
element.querySelector('a').addEventListener('click', onClick);
return element;
};

这样可以在创建容器时传递侦听器。

Answer 2

我编辑了你的代码，并在github(https://github.com/lalosh/stackoverflow-webpack-event-listener)上启动了一个功能齐全的示例，你可以自己检查。

请注意，您甚至没有在代码中传递事件处理程序，但假设您传递了一个像 这样的事件处理程序。

function onClickHandler(event){...}
"<a onclick="onClickHandler(event)"> ....

onClickHandler不会被成功调用，因为它被赋值到文件而不是全局对象(window)

修复只需将事件附加到全局对象window

window.onClickHandler = function onClickHandler(event){...}
"<a onclick="onClickHandler(event)"> ....

并注意，您可以使用addEventListener(更优选)，而不是直接从html内部附加事件侦听器，我建议您在这里检查比较addEventListener vs onclick

Answer 3

我决定重写我的代码和制作的文档。createelement而不是innerHTML。这是有效的。稍微多一点的代码行，但工作和概念正确。谢谢你的帮助。