如何解决在这个 Javascript 示例中,我将如何实现事件侦听器而不是内联 html 事件处理程序?
我试图从提供电影列表的 API 获取数据,这就是我实现结果呈现的方式。
const getAllData = async () => {
const movieData = await getMovies()
const movieContainer = movieData.map((movie)=> {
const listItem = `
<li class="movie">
<img src="${movie.Poster}"></img>
<h1>
${movie.Title}
</h1>
<h2>Release Year: ${movie.Year}</h2>
<p>
<button onclick="getDetails('${movie.imdbID}')">
Click for more details
</button>
</p>
</li>
`;
return listItem
}).join('')
document.getElementById("movieList").innerHTML = movieContainer;
}
这里是按钮点击调用的getDetails函数。
function getDetails(id){
sessionStorage.setItem('movieId',id);
window.location = 'movie.html';
return false;}
此代码按预期工作。但是,我遇到的问题是我想使用事件侦听器而不是内联 HTML 事件处理程序来实现此逻辑。我怎么能实现这个? 我是否需要对当前代码进行任何重大更改?
解决方法
创建一个 <li>
元素而不是 HTML 字符串,然后使用 querySelector
选择按钮后代,您可以使用 addEventListener
:
const getAllData = async () => {
const movieData = await getMovies();
const ul = document.getElementById("movieList");
for (const movie of movieData) {
const li = ul.appendChild(document.createElement('li'));
li.className = 'movie';
li.innerHTML = `
<img src="${movie.Poster}"></img>
<h1>
${movie.Title}
</h1>
<h2>Release Year: ${movie.Year}</h2>
<p>
<button>
Click for more details
</button>
</p>
`;
li.querySelector('button').addEventListener('click',() => {
getDetails(movie.imdbID);
});
}
};
我还强烈建议不要将外部输入直接连接到 HTML 字符串中,例如
<img src="${movie.Poster}"></img>
除非输入绝对值得信赖,否则可能导致任意代码执行,这是一种安全风险。如果您还没有这样做,我建议您要么验证插值的格式是否正确(例如,没有任何会导致 HTML 标记的内容,例如 <script>
标记),要么分配动态属性/使用基本模板填充 <li>
之后的属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。