addEventListener绑定事件页面加载时自动触发原因咨询

addEventListener 方法的第二个参数需要接收函数引用，也就是要等事件触发后才执行的函数本体。你写的绑定语句是 boxDiv.addEventListener("click", respondToClick (event));，JS 执行到这行时会立刻执行 respondToClick(event) 这个函数调用，把函数的返回值（你的函数没有写return，返回值是undefined）绑定为点击事件的回调。这就导致页面加载到这段JS时就会直接弹出alert，后续点击元素时，因为绑定的回调是无效的undefined，不会产生任何响应。

内联onclick写法能正常运行，是因为写在HTML属性里的代码字符串会被浏览器自动包裹成一个临时函数，只有点击事件触发时才会执行内部的respondToClick(event)调用，不会提前触发。

根据使用场景选以下任意一种写法即可：

• 直接传递函数引用，不需要手动加括号调用，事件触发时浏览器会自动将事件对象传入回调：

const boxDiv = document.getElementsByClassName("childbox")[0];
// 仅传递函数名，不追加括号做立即调用
boxDiv.addEventListener("click", respondToClick);
    
function respondToClick (event) {
    alert("clicked")
}

• 如果需要给回调传递额外自定义参数，可以在外层包裹一个匿名函数，等事件触发时再在内部执行目标函数：

const boxDiv = document.getElementsByClassName("childbox")[0];
boxDiv.addEventListener("click", (event) => {
  // 可按需传入自定义参数，例：respondToClick(event, "自定义参数")
  respondToClick(event);
});
    
function respondToClick (event) {
    alert("clicked")
}

附完整可运行代码（原有CSS/HTML无问题，仅修正JS部分） #

.parentbox {
    width:900px;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#06283D;
    border: solid 6px black;
}

.childbox {
 display:flex;
 justify-content:center;
 align-items:center;
 height:60px;
 width:60px;
 font-family:'Lato', sans-serif;
 text-align:center;
 background-color:steelblue;
 border:3px solid black;
 border-radius:50%;
}

<div class="parentbox">
<div class="childbox">
    <div class="text">
    <p>Wait!😠 </p>
    </div>
</div>
</div>

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