Javascript 如何向同一事件添加多个事件处理程序？

我是JavaScript新手，我尝试从两个不同的函数向同一事件注册两个事件处理程序，但无论我尝试什么，一个事件处理程序都会覆盖另一个。有没有办法从不同的函数注册多个事件处理程序

在下面的代码中，我试图通过按下两个按钮来注册两个事件处理程序，但处理程序会相互覆盖

文本

text1

文本 文本1 document.getElementById（“myBtn”）.addEventListener（“单击”，foo）； document.getElementById（“myBtn1”）.addEventListener（“单击”，栏）； 函数foo（）{ var target=document.getElementById（“文本”）； document.body.onkeypress=功能（e）{ animateElem（目标）； } } 功能条（）{ var target=document.getElementById（“text1”）； document.body.onkeypress=功能（e）{ animateElem（目标）； } } 函数animateElem（elemFound）{ var start=0.3； var增量=0.3； var id=设定间隔（额定容量，100）； 函数分配能力（）{ 如果（开始>3）{ 清除间隔（id）； elemFound.style.opacity=0.5； } 否则{ 开始=开始+增量； elemFound.style.opacity=开始%1； } } } 您应该使用而不是按键

addEventListener

允许为事件添加多个处理程序

document.body.onkeypress=函数（e）{…}

将覆盖其他函数

文本

text1

文本 文本1 document.getElementById（“myBtn”）.addEventListener（“单击”，foo）； document.getElementById（“myBtn1”）.addEventListener（“单击”，栏）； 函数foo（）{ var target=document.getElementById（“文本”）； document.body.addEventListener（'keypress'，（e）=>{ animateElem（目标）； }) } 功能条（）{ var target=document.getElementById（“text1”）； document.body.addEventListener（'keypress'，（e）=>{ animateElem（目标）； }) } 函数animateElem（elemFound）{ var start=0.3； var增量=0.3； var id=设定间隔（额定容量，100）； 函数分配能力（）{ 如果（开始>3）{ 清除间隔（id）； elemFound.style.opacity=0.5； } 否则{ 开始=开始+增量； elemFound.style.opacity=开始%1； } } }

---

的可能副本就像变量只能保存单个值一样（

var foo=42；

），属性也只能保存单个值（

document.body.onkeypress=…

）。使用

addEventListener

绑定处理程序，就像您对其他事件所做的那样。查看这篇关于addEventListener和onclick方法差异的文章我已经在Codepen.io中测试了您的代码，它确实起到了作用。函数foo（）和bar（）都已成功执行。请解释一下你的代码应该做什么。谢谢你的回复，我不确定另一个线程是否会使这个重复，但是@Maheer Ali的方法对我有效