此问题已在此处有答案：
addEventListener("click",...) firing immediately [duplicate]（3个答案）
Javascript "addEventListener" Event Fires on Page Load [duplicate]（2个答案）
十小时前关门了。
我正在为一个大学项目建设这个网站，遇到了以下问题。我在主页上的flecxbox中显示了一系列电影。我需要在点击电影海报时运行一些代码，所以我添加了一个eventlistener到电影div。但是现在当我运行网站时（没有点击任何地方）每部电影的EventListener都会被触发。然后当我点击图像时，什么也没有发生...我在这里做错了什么？提前感谢你的帮助！！
class Movie {
constructor(title, image, description, duration, release, age, schedule, seats) {
this.title = title;
this.image = image;
this.description = description;
this.duration = duration;
this.release = release;
this.age = age;
this.schedule = schedule; //dictionary met alle tijden per dag.
this.seats = seats;
}
}
const blankMovie = new Movie(
"Blank",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
"blank",
"blank"
);
var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie];
const homePage = document.getElementById("movie-slider");
for (let i = 0; i < allMovies.length; i++) {
const movieDiv = document.createElement("div");
movieDiv.className = "movie-banner";
const movieTitle = document.createElement("span");
movieTitle.className = "movie-banner__title";
movieTitle.textContent = allMovies[i].title;
const movieImage = document.createElement("img");
movieImage.className = "movie-banner__image";
movieImage.src = allMovies[i].image;
const movieDur = document.createElement("span");
movieDur.className = "movie-banner__desc";
movieDur.textContent = allMovies[i].duration;
homePage.appendChild(movieDiv);
movieDiv.appendChild(movieTitle);
movieDiv.appendChild(movieImage);
movieDiv.appendChild(movieDur);
movieDiv.addEventListener("click", console.log(i));
}body {
margin: 0;
font-family: 'Teko', sans-serif;
}
#movie-slider {
display: flex;
flex-direction: row;
overflow: auto;
gap: 10px;
padding: 0% 10%;
}
#movie-slider::-webkit-scrollbar {
height: 0;
}
.movie-banner {
flex-basis: 250px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.movie-banner__image {
object-fit: cover;
height: 100px;
}
.movie-banner__title {
color: wheat;
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: 2em;
padding: 10px
}
.movie-banner__desc {
color: wheat;
font-size: 1.3em;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movie Tickets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/general.css">
<!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>
<body>
<article class="content">
<section id="movie-slider">
</section>
</article>
<script src="/js/index.js" type="module"></script>
<script src="/js/general.js" type="module"></script>
</body>
</html>
1条答案
按热度按时间y1aodyip1#
你需要将点击逻辑 Package 在一个函数处理器中：
MDN web docs：
addEventListener(type, listener)listener：指定类型的事件发生时接收通知的对象（实现Event接口的对象）。此对象必须为null、具有handleEvent（）方法的对象或JavaScript函数。有关回调本身的详细信息，请参阅事件侦听器回调。