如何为多个HTML元素绑定单个onclick事件且避免触发全部语句

嘿，我来帮你捋捋问题出在哪～你遇到点击一个元素却触发两个元素事件的情况，是因为myFunc里的判断逻辑有问题：x和y其实都是指向myFunc函数的引用，所以两个if条件都会成立，不管点哪个元素，都会把两个段落都改成红色。

其实用JavaScript绑定事件时，完全可以像你用HTML属性绑定那样利用this关键字——它会自动指向触发事件的那个元素，这样代码既简洁又不会出错。

方法一：用this简化函数（最直接） #

和你HTML属性绑定的思路一致，但完全用JS实现，HTML代码也能保持干净：

<body>
  <p id="demo1">Paragraph 1</p>
  <p id="demo2">Paragraph 2</p>
  <script>
    // 给元素绑定点击事件
    document.getElementById("demo1").onclick = myFunc;
    document.getElementById("demo2").onclick = myFunc;

    function myFunc() {
      // this就是当前被点击的元素
      this.style.color = "red";
    }
  </script>
</body>

方法二：使用addEventListener（更推荐） #

这是现代JS绑定事件的标准方式，支持给同一个元素绑定多个同类型事件，灵活性更高：

<body>
  <p id="demo1">Paragraph 1</p>
  <p id="demo2">Paragraph 2</p>
  <script>
    function myFunc() {
      this.style.color = "red";
    }

    // 为每个元素添加事件监听
    document.getElementById("demo1").addEventListener('click', myFunc);
    document.getElementById("demo2").addEventListener('click', myFunc);
  </script>
</body>

方法三：批量处理大量元素 #

如果有很多需要绑定事件的元素，一个个获取太麻烦，可以用querySelectorAll选中一组元素，循环绑定：

<body>
  <p class="demo">Paragraph 1</p>
  <p class="demo">Paragraph 2</p>
  <p class="demo">Paragraph 3</p>
  <script>
    function myFunc() {
      this.style.color = "red";
    }

    // 选中所有class为demo的元素
    const elements = document.querySelectorAll('.demo');
    // 循环为每个元素绑定事件
    elements.forEach(element => {
      element.addEventListener('click', myFunc);
    });
  </script>
</body>

这样不管你点击哪个元素，只有被点击的那个会触发样式变化，同时HTML代码也能保持清爽～

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