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

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 allows adding more than a single handler for an event.

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>