Javascript 在同一DOM元素上为同一事件添加多个函数/处理程序?
我正在尝试将多个函数绑定到Javascript 在同一DOM元素上为同一事件添加多个函数/处理程序?,javascript,events,dom,Javascript,Events,Dom,我正在尝试将多个函数绑定到文档.onkeydown function keydownScreenHandler_1(event) { alert('- 1 -'); } document.onkeydown=keydownScreenHandler_1; function keydownScreenHandler_2(event) { alert('- 2 -'); } document.onkeydown=keydownScreenHandler_2; 这当然只是警报-2-,因为
文档.onkeydown
function keydownScreenHandler_1(event) {
alert('- 1 -');
}
document.onkeydown=keydownScreenHandler_1;
function keydownScreenHandler_2(event) {
alert('- 2 -');
}
document.onkeydown=keydownScreenHandler_2;
这当然只是警报-2-
,因为document.onkeydown
会被第二个函数覆盖
示例():
功能键下屏幕指示器1(事件){
警报('-1-');
}
//注册keydown事件处理程序:
document.onkeydown=keydownScreenHandler\u 1;
功能键下屏幕显示器2(事件){
警报('-2-');
}
//注册keydown事件处理程序:
document.onkeydown=keydownScreenHandler_2代码>
单击此处获取焦点,然后按键
使用现代事件处理。在任何半正式的最新浏览器上
document.addEventListener("keydown", keydownScreenHandler_1, false);
document.addEventListener("keydown", keydownScreenHandler_2, false);
在IE8和更早版本上,或在其中断的“兼容性”模式下的IE9-IE11上,它是:
document.attachEvent("onkeydown", keydownScreenHandler_1);
document.attachEvent("onkeydown", keydownScreenHandler_2);
attachEvent
和addEventListener
之间还有其他区别,例如从何处获取事件对象。如果您需要支持过时的浏览器,如IE8(或兼容模式下的IE9-IE11)
使用addEventListener
更新代码段:
功能键下屏幕指示器1(事件){
警报('-1-');
}
//注册keydown事件处理程序:
文件。添加的监听器(“向下键”,向下键监听器指针1,错误);
功能键下屏幕显示器2(事件){
警报('-2-');
}
//注册keydown事件处理程序:
文件。添加的监听器(“向下键”,向下键监听器键盘2,错误)代码>
单击此处获取焦点,然后按键
从另一个函数调用所需函数,如下所示。更新
功能键下屏幕指示器1(事件){
警报('-1-');
按键下筛手2(事件);
}
功能键下屏幕显示器2(事件){
警报('-2-');
按键下筛手3(事件);
}
功能键DownScreenHandler_3(事件){
警报('-3-');
}
//注册keydown事件处理程序:
document.onkeydown=keydownScreenHandler\u 1代码>
点击这里获得焦点
或者更好的addEventListener
和attachEvent
function keydownScreenHandler_1(event) {
alert('- 1 -');
}
function keydownScreenHandler_2(event) {
alert('- 2 -');
}
function keydownHandlers(event) {
keydownScreenHandler_1(event);
keydownScreenHandler_2(event);
}
document.addEventListener("keydown", keydownHandlers, false);
或者,您可以添加对的多个调用
document.addEventListener("keydown", function_name, false);
试着这样做…我很惊讶没有找到这个问题的完整副本。我发现了几个与此相关的问题,但还有其他一些问题,但这是我所发现的问题的最清晰版本。这丢失了这个。OP在他们的示例中没有使用this
,但在一般情况下,this
对于事件处理函数来说是一件重要的事情。我根据用户的要求回答了这个问题。。。如果用户想使用此
,还有第二个选项。。。这是否决票的一个好理由吗?不要假设你知道谁根据谁的评论投了票。他们经常是不同的人。但总的来说,最好不要向提出基本问题的人提供明显不完整的信息,这只会给他们以后的问题带来麻烦。。不是那个意思…:)我只是想听听你的意见。。。你是个有经验的用户。。声誉不是免费的。。。
document.addEventListener("keydown", function_name, false);