使用上面的代码时,“mouseenter”和“mouseleave”会在开始时触发一次。 “onmouseenter”和“onmouseleave”在预期时被解雇。如何在预期时使“mouseenter”和“mouseleave”发生火灾?
<!DOCTYPE html>
<html>
<body>
<div id="banner" style="border: 2px solid black; height: 200px"></div>
<div style="border: 2px solid black; height: 200px"></div>
<script>
var banner = document.getElementById("banner");
banner.setAttribute("onmouseenter", 'console.log("onmouseenter")');
banner.setAttribute("onmouseleave", 'console.log("onmouseenter")');
banner.addEventListener("mouseenter", console.log("mouseenter"));
banner.addEventListener("mouseleave", console.log("mouseleave"));
</script>
</body>
</html>
事件侦听器接受一个在事件发生时将触发的函数。此刻,你立刻打电话给console.log
,而不是等待事件发生。如果将控制台日志放在函数中,则不会发生这种情况。
banner.addEventListener("mouseenter", function() {
console.log("mouseenter");
});
banner.addEventListener("mouseleave", function() {
console.log("mouseleave");
});
这是本周我第二次看到setAttribute
与onclick
一起使用。我建议不要使用那种方法并坚持使用addEventListener
。
如何在预期时使“mouseenter”和“mouseleave”发生火灾?
addEventListener
期待一个函数作为回调处理程序而不是函数调用的结果(即console.log
)你需要将它们包装在一个function
中
banner.addEventListener("mouseenter", function(){ console.log("mouseenter") });
banner.addEventListener("mouseleave", function(){ console.log("mouseleave") });