你如何记录由 jQuery 中的元素触发的所有事件?

IT技术 javascript jquery events dom-events
2021-01-19 18:13:18

我想查看输入字段在用户与其交互时触发的所有事件这包括以下内容:

  1. 点击它。
  2. 点击关闭它。
  3. 进入它。
  4. 远离它。
  5. Ctrl+CCtrl+V在键盘上。
  6. 右键单击 -> 粘贴。
  7. 右键单击 -> 剪切。
  8. 右键单击-> 复制。
  9. 从另一个应用程序拖放文本。
  10. 用 Javascript 修改它。
  11. 使用调试工具(如 Firebug)修改它。

我想使用console.log. 这在 Javascript/jQuery 中是否可行,如果可以,我该怎么做?

6个回答

我不知道为什么没有人使用它......(也许是因为它只是一个 webkit 的东西)

打开控制台:

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs
@vsync 在引号中尝试“monitorEvents”。它是控制台对象的一部分,但取决于浏览器。它只是一个调试工具,因为它依赖于控制台......所以成为标准是无关紧要的
2021-03-14 18:13:18
它不包括自定义事件,但它确实有助于理解事件堆栈。
2021-03-23 18:13:18
请注意,您还可以使用类似的monitorEvents($0, 'mouse');方法记录已检查(右键单击 >“检查”)元素的所有事件briangrinstead.com/blog/chrome-developer-tools-monitorevents
2021-03-30 18:13:18
这是正确答案。不想在生产代码中使用console.log,使用console调试事件就好了
2021-03-31 18:13:18
谷歌monitorEvents没有提供这方面的相关信息,而且,我高度怀疑这是非常不标准的
2021-04-07 18:13:18
$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

这会给你很多(但不是全部)关于是否触发事件的信息......除了像这样手动编码之外,我想不出任何其他方法来做到这一点。

看起来这个方法将绑定所有本机事件。我猜没有办法显示自定义事件,例如,如果插件触发了一些自定义事件?
2021-03-16 18:13:18
我接受这个作为答案,但我问题的真正答案是“是与否”。我正在寻找的更多是所有被触发的事件的列表,以便我知道哪些事件可供我挂钩。在这种情况下,我可以看到事件何时被触发,但我必须事先知道它的名称。
2021-03-17 18:13:18
@Joseph:关于您之前的评论“焦点不是本地事件”-嗯……是的,早在 jQuery(以及 Chrome 和 FF 之前)之前就已经存在了。此外,您可能希望添加blur到您的事件列表中。
2021-03-19 18:13:18
奇怪的是,你和肖恩都拼错了function,而且方式相同:)。
2021-03-20 18:13:18
monitorEvents(document) 是真正的答案
2021-03-22 18:13:18

使用 .data('events') 集合有一个很好的通用方法:

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

当这个特定事件被触发时,它会记录每个已经被 jQuery 绑定到元素的事件。这段代码多次对我很有帮助。

顺便说一句:如果您想查看对象上触发的每个可能的事件,请使用 firebug:只需右键单击 html 选项卡中的 DOM 元素并选中“日志事件”。然后每个事件都会被记录到控制台(这有时有点烦人,因为它会记录每个鼠标移动......)。

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

我知道答案已经被接受,但我认为可能有一种更可靠的方法,您不必事先知道事件的名称。据我所知,这仅适用于本机事件,而不适用于由插件创建的自定义事件。我选择省略 jQuery 的使用来简化一些事情。

let input = document.getElementById('inputId');

Object.getOwnPropertyNames(input)
  .filter(key => key.slice(0, 2) === 'on')
  .map(key => key.slice(2))
  .forEach(eventName => {
    input.addEventListener(eventName, event => {
      console.log(event.type);
      console.log(event);
    });
  });

我希望这可以帮助任何阅读本文的人。

编辑

所以我在这里看到了另一个类似的问题,所以另一个建议是执行以下操作:

monitorEvents(document.getElementById('inputId'));
这是最优雅的解决方案。我想不可能发现自定义事件,因为这些事件可以通过 dispatchEvent() 发出。然而,这在一个紧凑的、无依赖的、少量代码中涵盖了所有其他内容。
2021-04-08 18:13:18