addEventListeners 自动触发[重复]答案

【问题标题】：addEventListeners trigger automatically [duplicate]addEventListeners 自动触发[重复]
【发布时间】：2020-12-15 15:02:02
【问题描述】：

好的，我是这里的超级新手，所以请记住这一点。我在 bskt_messages 中保存的 li 项目中有几条消息。它是一个 HTML 集合。我正在尝试添加一个单击事件侦听器，但是每次运行该页面时，它都会自动调用 return_value 函数。我使用了这个网站上类似帖子的代码，但似乎没有区别。我在这里做错了什么？

$(document).ready(function() {  
     var bskt_messages = document.querySelectorAll('.message_item');    
    for (let i = 0; i < bskt_messages.length; i++) {
        bskt_messages[i].style.cursor = 'pointer';
        bskt_messages[i].addEventListener("click", return_value(i));
    };
});

function return_value(i) {
console.log("clicked " + i);
}

【问题讨论】：

那是因为当文档准备好时你正在执行这个函数。如果你想将return_value函数设置为监听器，你应该使用它自己：bskt_messages[i].addEventListener("click", return_value);

标签： javascript

【解决方案1】：

那是因为您正在执行该函数。您想将函数调用嵌套在 click 方法中。

$(document).ready(function() {  
    var bskt_messages = document.querySelectorAll('.message_item');    
    for (let i = 0; i < bskt_messages.length; i++) {
        bskt_messages[i].style.cursor = 'pointer';
        bskt_messages[i].addEventListener("click", function (event) {
            event.preventDefault();
            return_value(i);
        }
        
        );
    };
});
function return_value(i) {
    console.log("clicked " + i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="message_item">btn0</button>
<button type="button" class="message_item">btn1</button>
<button type="button" class="message_item">btn2</button>

请注意，生成太多事件侦听器不是一个好习惯。对于三个按钮你很好，但是有几十个项目，你应该监听父元素上的事件并将事件目标与你想要的元素进行比较（例如，一个按钮节点可能存储在一个数组中）。

const wrapper = document.querySelector('#wrapper_around_buttons');
const myButtons = wrapper.querySelectorAll('button');
wrapper && wrapper.addEventListener('click', event => {
   let button = event.target.closest('button');
   if (button && myButtons.include(button)) {
       console.log("clicked a button!");
   }
});

【讨论】：

是的，它做到了，非常感谢大家！