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（触发事件的单击元素），看看它是否是您希望监听器运行的元素：

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事件”（用于HTML按钮）分配给1个函数，而不触发所有语句

3 个答案: