如何将多个 "onclick events"（对于 HTML 按钮）分配给 1 个函数，而不触发所有语句

Question

我一直在尝试为多个 HTML

元素分配 onclick 事件。我试图通过仅使用 1 个函数来编写尽可能少的代码。我知道一种通过向 HTML 元素添加事件属性来实现的简单方法，如下所示：

<body>

<p id="demo1" onclick="myFunc(this)">Paragraph 1</p>
<p id="demo2" onclick="myFunc(this)">Paragraph 2</p>

<script>
function myFunc(para) {
  para.style.color = "red";
}
</script>

但是如果我要将许多事件属性添加到多个 HTML 元素，Html 文档会变得一团糟，对吧？所以我宁愿在 JavaScript 中编写代码。但问题是，当我在 Js 中分配代码并单击

标签之一时，它们都会被触发（顺便说一句，我对编写 Js 非常陌生，所以这可能是我的愚蠢）

<body>
<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>
<script>
    var x = document.getElementById("demo1").onclick = myFunc;
    var y = document.getElementById("demo2").onclick = myFunc;

    function myFunc() {
        if (x == document.getElementById("demo1").onclick) {
            document.getElementById("demo1").style.color = "red";
        } 
        if (y == document.getElementById("demo2").onclick) {
            document.getElementById("demo2").style.color = "red";
        }
    }
</script>

Answer 1

考虑改用事件委托 - 将侦听器分配给要侦听事件的元素的容器，然后检查 event.target（已点击触发事件的元素）以查看它是否是您希望侦听器运行 on:

的元素

document.body.addEventListener('click', ({ target }) => {
  // Only continue on `<p>` elements:
  if (!target.matches('p')) {
    return;
  }
  target.style.color = 'red';
});

<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>
<div>some other element that will not change on click</div>

如果您要为每个单独的元素添加侦听器，请检查侦听器内部的 this 以引用被单击的元素，然后您可以根据需要分配其样式：

document.getElementById("demo1").onclick = myFunc;
document.getElementById("demo2").onclick = myFunc;

function myFunc() {
  this.style.color = 'red';
}

<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>

（您也可以使用 myFunc 中的参数来获取 event，然后从中获取 event.target，就像第一种方法一样）

Answer 2

jQuery 是一个选项。

$(document).on('click','p',function(){
   $(this).css('color','red');
});

Answer 3

您可以依靠事件对象来确定触发函数的元素和事件类型（点击、悬停、按键等）：

handleEvent({type}) { switch(type) { case "click": return require("./actions/doStuff")(/* action dates */) case "mouseenter": return this.setState({ hovered: true }) case "mouseleave": return this.setState({ hovered: false }) default: return console.warn('No case for event') } }

如何将多个 "onclick events"（对于 HTML 按钮）分配给 1 个函数，而不触发所有语句

How to assign multiple "onclick events" (for HTML buttons) to 1 function, without trigger all the statments

html

javascript

events

assign