为何HTML中addEventListener绑定后alert直接触发？如何改为点击触发？

嘿，这问题我之前也踩过坑，咱们一步步拆解清楚：

为什么alert会立即触发？ #

核心是两个小错误导致的：

• 事件名称带了多余前缀：addEventListener的第一个参数需要的是不带on的事件类型，比如应该用"click"而非"onclick"。
• 回调函数被直接执行了：你写的alert("click sucess")是一个即时执行的函数调用，页面加载到这行代码时就会立刻触发alert，而不是把它作为点击事件的待执行回调。必须把它包装成一个函数，让浏览器在点击动作发生时才去调用它。

如何修改为点击时触发？ #

这里有两种常用的修复方式，都能解决问题：

方式一：用匿名函数包裹alert #

<!DOCTYPE html>
<html>
<p class="click"> click here </p>
<script>
const p = document.querySelector(".click");
// 用匿名函数把alert包起来，点击时才执行
p.addEventListener("click", function() {
  alert("click success");
});
</script>
</html>

方式二：用箭头函数（更简洁） #

<!DOCTYPE html>
<html>
<p class="click"> click here </p>
<script>
const p = document.querySelector(".click");
p.addEventListener("click", () => alert("click success"));
</script>
</html>

另外小建议：给变量p加上const声明，避免全局变量污染，代码会更规范哦～

内容的提问来源于stack exchange，提问作者KX Jaw