如何将多个事件处理程序添加到同一个事件中？
如何将多个事件处理程序添加到同一个事件中？
提问于 2019-03-12 03:50:36
我是JavaScript的新手，我正在尝试从两个不同的函数向同一事件注册两个事件处理程序，但无论我尝试什么，一个事件处理程序都会覆盖另一个事件处理程序。有没有办法让我从不同的函数注册多个事件处理程序？
在下面的代码中，我试图通过按下两个按钮来注册两个事件处理程序，但这两个处理程序相互覆盖。
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-12 04:07:05
您应该使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55109334
复制相关文章
相似问题