Question

我有一个元素$button，我在其上定义了以下事件：

$button.on('draghover', function(event) { ... });

在我的代码的其他地方，我想找到所有有听众的元素附加到＆＃39; draghover＆＃39;事件。我期待像jQuery.getElementsForEvent('draghover')这样的函数，它会返回一个包含按钮的列表：[ $button ]。

任何帮助都将不胜感激。

Answer 1

我能想到的唯一解决方案是迭代集合中的每个元素，看看它是否有事件，然后返回过滤后的列表。这是一个例子（在控制台中运行它来测试）：

jQuery('a:last').on('test', function() { alert('hello'); });

jQuery.fn.extend({
    getElementsWithEvent: function(eventName) {
        return this.filter(function(i, element) {
            var flagged = false;
            if ($(element).data('events')) {
                jQuery.each($(element).data('events'), function(i, event) {
                    if (event[0].type == eventName) {
                        flagged = true;
                        return false;
                    }
                });
            }
            return flagged;
        });
    }
});

jQuery('a').getElementsWithEvent('test');

Answer 2

不，在Jquery中没有直接的方法。

事件绑定发生在对象级别，即，当您将事件绑定到具有特定处理程序的对象时，事件处理程序存储在对象本身中，当您触发事件时，jquery将在对象中查找特定事件的处理程序并解雇它们。

原始解决方案是迭代所有元素并检查它是否具有特定事件。

更高级（和复杂）的解决方案是在键是事件名称时定义全局字典，并且值是绑定到它的元素数组，覆盖jquery函数（$ .bind，$ .unbind和其他）。

Answer 3

鉴于（可能）有更多的DOM节点，而不是事件监听器，跟踪与某些事件相关的元素是有意义的。

// Events is a key:value pair, where key is your event name and 
// the values are an array full of elements associated with that event.
// An ES2015 Map would be better here.

var events = {}

function attach( element, event, listener ) {
  // Create new array with the element or append it to the list
  events.event = events.event && events.event.length
    ? events.event.concat( [ element ] )
    : [ element ]

  element.addEventListener( event, listener )
}

events然后包含与特定事件关联的所有元素，并且不需要遍历整个DOM以查找data。

在示例中，每个数组都是元素，但您可能希望更改结构，以便数组包含引用element:listener的对象，这样您就可以更轻松地执行反向操作并从元素中删除侦听器，但保留热门活动清单。

查找绑定到特定事件的元素

3 个答案: