如何將多個事件處理程序添加到同一事件？

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>