Javascript “如何分配多个”；onclick事件“；（对于HTML按钮）到1函数，不触发所有状态_Javascript_Html_Events_Assign

Javascript “如何分配多个”；onclick事件“；（对于HTML按钮）到1函数，不触发所有状态

javascript html events

Javascript “如何分配多个”；onclick事件“；（对于HTML按钮）到1函数，不触发所有状态,javascript,html,events,assign,Javascript,Html,Events,Assign,我一直在尝试为多个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 myF

我一直在尝试为多个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>


第1段
第2段
函数myFunc（第{
para.style.color=“红色”；
}

但是，如果我向多个HTML元素添加许多事件属性，HTML文档将是一团混乱，对吗？所以我宁愿用JavaScript编写代码。但问题是，当我在Js中分配代码，并单击其中一个标记时，它们都会被触发（顺便说一句，我对编写ijs非常陌生，所以可能是因为我的愚蠢）


第1段
第2段
var x=document.getElementById（“demo1”）.onclick=myFunc；
var y=document.getElementById（“demo2”）.onclick=myFunc；
函数myFunc（）{
if（x==document.getElementById（“demo1”）.onclick）{
document.getElementById（“demo1”）.style.color=“红色”；
} 
if（y==document.getElementById（“demo2”）.onclick）{
document.getElementById（“demo2”）.style.color=“红色”；
}
}

考虑改用事件委派-将侦听器分配给要侦听事件的元素的容器，然后检查

事件。target

（触发事件的单击元素）以查看它是否是您希望侦听器在其上运行的元素：

document.body.addEventListener（'click'，（{target}）=>{
//仅在``元素上继续：
如果（！target.matches（'p'））{
返回；
}
target.style.color='red'；
});
第1段
第2段
单击时不会更改的其他元素考虑改用事件委派-将侦听器分配给要侦听事件的元素容器，然后检查事件。target
（触发事件的单击元素）以查看它是否是您希望侦听器在其上运行的元素：

document.body.addEventListener（'click'，（{target}）=>{
//仅在``元素上继续：
如果（！target.matches（'p'））{
返回；
}
target.style.color='red'；
});
第1段
第2段
单击jQuery时不会更改的其他一些元素将是一个选项
$(document).on('click','p',function(){
   $(this).css('color','red');
});

jQuery将是一种选择
$(document).on('click','p',function(){
   $(this).css('color','red');
});

您可以依赖事件对象来确定触发函数的元素和事件类型（单击、悬停、按键等）：
handleEvent（{type}）{
开关（类型）{
案例“点击”：
返回要求（“./actions/doStuff”）（/*action dates*/）
案例“mouseenter”：
返回此.setState（{hovered:true}）
案例“mouseleave”：
返回此.setState（{悬停：false}）
违约：
返回控制台。警告（'没有事件案例'）
}}
您可以依靠事件对象来确定触发函数的元素和事件类型（单击、悬停、按键等）：
handleEvent（{type}）{
开关（类型）{
案例“点击”：
返回要求（“./actions/doStuff”）（/*action dates*/）
案例“mouseenter”：
返回此.setState（{hovered:true}）
案例“mouseleave”：
返回此.setState（{悬停：false}）
违约：
返回控制台。警告（'没有事件案例'）
}}
onclick是一种非常老式的分配javascript事件的方法。如果包含jQuery是一个选项，那么使用addEventListener（）会更好：$（“p”）。单击（…）
，作业完成代码总是更改两个元素的颜色的原因是因为myFunc函数中的If语句。这些条件总是符合事实的。。查看下面的答案，可以找到更好的选项。onclick是一种非常老式的分配javascript事件的方法。如果包含jQuery是一个选项，那么使用addEventListener（）会更好：$（“p”）。单击（…）
，作业完成代码总是更改两个元素的颜色的原因是因为myFunc函数中的If语句。这些条件总是符合事实的。。查看下面的答案以获得更好的选择。或者只需$（“p”）。如果不需要事件委派，请单击（…）
（如果
是静态的，而不是动态添加的）@JeremyThille我喜欢动态添加的元素。它比点击bot和自动化流程更安全。或者干脆$（“p”）。如果不需要事件委派，请点击（…）
（如果
是静态的，而不是动态添加的）@JeremyThille我喜欢动态添加的元素。它比点击机器人和自动化程序更安全。最后一句话给了我一个想法！我创建了一个函数，并为其分配了标记，并将此代码添加到函数中：event.target.style.color=“red”；它就像一个符咒！最后一句话给了我一个想法！我创建了一个函数，并为其分配了标记，并将此代码添加到函数中：event.target.style.color=“red”；它就像一个符咒！谢谢你的帮助，找到了一个简单一点的方法来完成我的任务，但这可能会派上用场：）谢谢你的帮助，找到了一个简单一点的方法来完成我的任务，但这可能会派上用场：）