如何将多个事件处理程序添加到同一个事件？答案

【问题标题】：how to add multiple event handlers to the same event?如何将多个事件处理程序添加到同一个事件？
【发布时间】：2019-03-11 19:50:35
【问题描述】：

我是 JavaScript 新手，我正在尝试将 2 个事件处理程序注册到来自两个不同函数的同一个事件，但无论我尝试什么，一个事件处理程序都会覆盖另一个。有什么方法可以注册来自不同函数的多个事件处理程序？

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

<p id="text">text</p>

<p id="text1">text1</p>

<button id="myBtn">text</button>

<button id="myBtn1">text1</button>

<script>
document.getElementById("myBtn").addEventListener("click", foo);

document.getElementById("myBtn1").addEventListener("click", bar);

function foo() {
  var target = document.getElementById("text");

  document.body.onkeypress = function(e){
    animateElem(target);
  }
}

function bar() {
  var target = document.getElementById("text1");

  document.body.onkeypress = function(e){
    animateElem(target);
  }
}

function animateElem(elemFound){
    var start = 0.3;
    var increment = 0.3;

    var id = setInterval(allOpacity, 100);

    function allOpacity() {
        if (start > 3) {
          clearInterval(id);
          elemFound.style.opacity = 0.5;
        } 
        else {
          start = start + increment;
          elemFound.style.opacity = start % 1;
        }
    }
}

</script>

【问题讨论】：

addEventListener Two Functions的可能重复
就像变量只能保存一个值 (var foo = 42;) 一样，属性也只能保存一个值 (document.body.onkeypress = ...)。使用addEventListener 绑定处理程序，就像您对其他事件所做的那样。
查看这篇文章，了解 addEventListener 和 onclick 方法的区别stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
我已经在 Codepen.io 中测试了你的代码，它确实有效。函数 foo() 和 bar() 均已成功执行。请解释你的代码应该做什么。
感谢您的回复，不确定其他线程是否使这个重复，但@Maheer Ali 的方法对我有用

标签： javascript

【解决方案1】：

您应该使用addEventListener() 而不是onkeypress

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

document.body.onkeypress = function(e){...} 将覆盖其他函数。

<p id="text">text</p>

<p id="text1">text1</p>

<button id="myBtn">text</button>

<button id="myBtn1">text1</button>

<script>
document.getElementById("myBtn").addEventListener("click", foo);

document.getElementById("myBtn1").addEventListener("click", bar);

function foo() {
  var target = document.getElementById("text");
  document.body.addEventListener('keypress',(e)=>{
    animateElem(target);
  })   
}

function bar() {
  var target = document.getElementById("text1");
  document.body.addEventListener('keypress',(e)=>{
    animateElem(target);
  }) 
}

function animateElem(elemFound){
    var start = 0.3;
    var increment = 0.3;

    var id = setInterval(allOpacity, 100);

    function allOpacity() {
        if (start > 3) {
          clearInterval(id);
          elemFound.style.opacity = 0.5;
        } 
        else {
          start = start + increment;
          elemFound.style.opacity = start % 1;
        }
    }
}

</script>

【讨论】：