在前端开发中，我们常常需要使用到各种事件绑定，其中最常用的莫过于点击事件。然而，在实际开发中，我们有时会遇到一个让人困惑的问题：为什么触发器（单击“否”）不工作？
问题分析
在解决这个问题之前，我们需要先理解一下事件绑定的机制。在浏览器中，每个 HTML 元素都有自己的事件队列，并且可以通过 JavaScript 代码向该队列中添加事件。当用户与元素交互时，浏览器会检查该元素的事件队列，并且按顺序执行队列中的事件。
通常情况下，我们可以很容易地给一个元素添加点击事件的监听器：
const el = document.getElementById('my-button');
el.addEventListener('click', () => {
console.log('按钮被点击了！');
});但如果你发现你的点击事件监听器并没有被调用，那么问题可能出在哪里呢？
1. 代码逻辑错误
首先，我们需要检查一下代码是否存在逻辑上的错误。也就是说，在添加事件监听器的时候，我们是否正确地指定了元素的 ID 或类名。如果代码逻辑没有问题，那么我们需要接着检查下面两个方面。
2. 事件绑定方式错误
在 HTML5 中，有两种向元素添加事件监听器的方式：addEventListener 和 onclick。其中，addEventListener 是推荐使用的方式，因为它可以绑定多个监听器，并且可以自由地添加或删除监听器。
相比之下，onclick 只能绑定一个监听器，并且如果要改变已经绑定的监听器，就必须先移除原来的监听器，再添加新的监听器。因此，在实际开发中，我们应该尽量避免使用 onclick。
-- -------------------- ---- ------- -- ---------- ----- -- - ------------------------------------- ---------------------------- -- -- - ----------------------- --- -- ---------- ----- -- - ------------------------------------- ---------- - -- -- - ----------------------- --
3. 代码执行时机错误
另外，还有一种可能是代码执行的时机不对。也就是说，在页面加载完成之前，JavaScript 代码就已经执行完毕，导致元素还没有被渲染出来，事件也就无法被正确注册。
为了解决这个问题，我们可以将 JavaScript 代码放置在 window.onload 事件回调函数中，确保在页面渲染完成之后再去注册事件监听器。
window.onload = function() {
const el = document.getElementById('my-button');
el.addEventListener('click', () => {
console.log('按钮被点击了！');
});
}总结
通过以上的介绍，我们可以知道当触发器（单击“否”）不工作时，常常是由于代码逻辑错误、事件绑定方式错误或者代码执行时机错误所导致。因此，在实际开发中，我们需要多加注意这些问题，并且尽可能地使用 addEventListener 来绑定事件监听器。
最后，给出一个完整的例子：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
------- ----------------------------
--------
------------- - ---------- -
----- -- - -------------------------------------
---------------------------- -- -- -
-----------------------
---
-
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10858
