JavaScript：如何给事件处理函数传参并阻止默认行为？

你的问题出在事件监听的回调绑定方式和变量作用域上，具体错误点和修复方案如下：

核心错误点 #

1. 事件监听绑定错误：valueButton.addEventListener("click", valueSelect(targetField); 这行直接执行了valueSelect(targetField)，把返回值（undefined）当作回调，而非传递函数引用。而且此时targetField还未定义（在forEach循环后才声明），会触发变量未定义错误。
2. 变量作用域问题：targetField在循环之后声明，循环内无法访问该变量。
3. 依赖全局event对象：valueSelect函数直接使用全局event，不符合现代JS规范，应该显式接收event参数。
4. DOM属性拼写错误：listEl.classname应为listEl.className（JavaScript中DOM元素的类名属性是驼峰式的className）。

修复后的代码 #

function dropdownList(testlist, clicked) {
    const listEl = document.createElement("ul");
    listEl.className = "autocomplete-list";

    let clickedId = `scripts-${clicked}-script`;
    let targetField = document.querySelector(`[data-testid="${clickedId}"]`);

    testlist.forEach(item => {
        const listItem = document.createElement("li");
        const valueButton = document.createElement("button");
        valueButton.innerHTML = item;
        // 用箭头函数包裹，同时传递event和targetField
        valueButton.addEventListener("click", (event) => valueSelect(event, targetField));
        listItem.appendChild(valueButton);
        listEl.appendChild(listItem);
    });

    targetField.after(listEl);
}

function valueSelect(event, targetField) {
    event.preventDefault();
    const buttonEl = event.target;
    targetField.value = buttonEl.innerHTML;
}

关键修复说明 #

• 事件回调绑定：通过箭头函数(event) => valueSelect(event, targetField)包裹，既传递了targetField，又将event参数显式传给valueSelect函数。
• 变量提前声明：将targetField的声明移到forEach循环之前，确保循环内可以正常访问该变量。
• 显式传递event：valueSelect函数接收event参数，避免依赖全局event对象，代码更可靠。
• 修正DOM属性拼写：将classname改为className，确保样式类能正确应用。

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