Question

我正在尝试捕获页面上的所有DOM事件。这是我提出的源代码。它需要jQuery。那里有更好的实施吗？看到我的实施有任何问题吗？

//需要jQuery

$('*').each(function () {
    var ignore = [
        'mousemove', 'mouseover',  'mouseout',  'mouseenter', 'mouseleave'
    ];

    for (var key in this) {
        if (key.substring(0, 2) === 'on') {
            $(this).on(key.substr(2), function (event) {
                var eventName = event.type,
                    tag = this.tagName.toLowerCase(),
                    id = this.id ? ('#' + this.id) : '';

                if (ignore.indexOf(eventName) === -1) {
                    console.log(tag + id + ' ' + eventName);
                }
            });
        }
    }
});

Answer 1

也许是这样的：

function doSomething() { console.log('yay'); }

var eventName,
    prefix;

for (var key in document) {
    prefix = key.substr(0, 2);

    if (prefix === "on") {
        eventName = key.substr(2);        
        document.addEventListener(eventName, doSomething, true);
    }
}

它不需要jQuery并在捕获模式下添加侦听器，这意味着如果传播停止，则无论如何都将触发事件。当然，如果您愿意，可以添加过滤。

Fiddle

Answer 2

也许使用内置的_data助手，类似这样的东西？

$('*').each(function (i, el) {
  var events = $._data(el, 'events');
  if (events) {
    console.log(el);
    for (var p in events) {
      if (ignore.indexOf(p) === -1) { console.log(p); }
    }
  }
});

（尝试将此添加到此页面的控制台 - 您将看到元素及其事件滚动过去。）

捕获所有DOM事件

2 个答案: