如何检测键盘事件已经绑定

How to detect keyboard event is already bound?

本文关键字:事件 绑定 键盘 何检测 检测      更新时间:2023-09-26

我正在使用用户的键事件创建一个Chrome扩展。但是我想提醒用户,如果元素已经绑定到一个键盘事件。

如何检测键事件是否已经绑定?

这很棘手。实际上,您可以通过多种不同的方式绑定到HTMLElement的事件。我想最简单的绑定方法(并检查是否绑定了某些内容)是这样的:

var ele = document.getElementById("yourDiv");
if (ele.onkeydown) {
  alert("onkeydown event is already bound");
}
else {
  ele.onkeydown = yourEventHandler;
}

问题是,正如这篇文章的评论部分所问的,如果你没有能力在事件绑定之前改变HTML元素的原型,那么就没有真正的方法来检测addEventListener或attachEvent与programattic javascript添加的事件。(因此,在绑定事件之前,用户脚本不能真正更改原型,因为它是在页面上的所有脚本都运行之后运行的)。但是,如果这是您自己的页面,并且您只想监视这些事件更改。你可以像这样把它插入到原型中:

// cache the original event handler
HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;
// now override it so you can add in your custom functionality
HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,b,c); 
    // do whatever you want to cache those listening functions, maybe shove them in an array
    // for the current object
    if (!this.listeners) {  
        this.listeners = new Array();
    }
    this.listeners.push({a : a, b : b , c : c});
};
// code here that adds an event handler
document.getElementById("txtField").addEventListener("keydown", function() {
  console.log("key down pressed"); 
});
// find the event listeners that are bound
var listeners = document.getElementById("pressed").listeners;

看,我在这里发现了这个问题,它也涵盖了这个确切的问题,并且在那里有一些很好的答案进入了很多深度:如何在调试或从JavaScript代码中找到DOM节点上的事件侦听器?