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

Question

我是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>

Answer 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>