[英]Event listener not firing on click
我正在创建一个简单的函数来在单击事件时关闭Flash消息div,但是我的监听器未触发。
我编写了3个不同的函数来尝试使其正常运行,但是什么也没发生,Chrome控制台并没有告诉我任何事情。
我的第一个是ES6类风格的,这是:
class closeFlashMessages {
constructor () {
this.getFlashMessages = document.querySelector("#flash-messages");
this.addEventListeners();
}
close () {
console.log(this.getFlashMessages);
this.getFlashMessages.className = "hide";
}
addEventListeners () {
if(this.getFlashMessages)
this.getFlashMessages.addEventListener("click", this.close);
}
}
new closeFlashMessages();
我的第二个是:
(function (){
let getFlashMessages = document.querySelector("#flash-messages");
function close () {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
function addEventListeners () {
getFlashMessages.addEventListener("click", function () {
close()
});
}
addEventListeners();
});
我的最后一个是:
(function (){
let getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", close(getFlashMessages));
function close (id) {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
});
我的HTML:
<div id="flash-messages">
<div class="flash success">
<p>Recept byl přidán do nákupního seznamu.</p>
</div>
</div>
但是他们都没有工作! 我不明白
对于前两个,我在this.getFlashMessages
上不确定,也不确定原因。
我的解决方案不在ES6中
function Init(){
var id = document.getElementById('flash-messages');
var msg = document.querySelector('.flash');
id.addEventListener('click',function(){
msg.className = 'hide';
});
}
Init();
在这里查看演示
我对ES6不太熟悉。
但是,如果我在javascript上尝试类似的代码示例,则如下所示,我希望它在ES6中也几乎相似。
var getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", function()
{
clicked(getFlashMessages);
});
function clicked(id){
console.log(id);
id.className = "hide";
}
在这里,我正在调用匿名函数,其默认参数将是https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener中给出的事件对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.