Question

我正在开发一个Web应用程序，我需要捕获所有元素的所有事件，我自己编写代码，但我需要你们可爱的专家来尽可能地提高代码的性能。

// Create mouse event callbacks and an array to store callbacks,
// This array is to prevent creation of callback functions multiple times
var mouseEventCallbacks = {};
var mouseEvents = [
    'mouseover', 
    'mouseout', 
    'mousedown', 
    'mouseup', 
    'click', 
    'mousemove', 
    'contextmenu', 
    'dblclick', 
    'mousewheel'
];

function mouseEventCallback(eventType){
    if(!mouseEventCallbacks[eventType])
        mouseEventCallbacks[eventType] = function(event) {
            self.port.emit('new-event', {
                x: event.pageX + window.pageXOffset, 
                y: event.pageY + window.pageYOffset
            },{
                type: eventType
            });
        }

    return mouseEventCallbacks[eventType];
}

// Attach all events to all elements
var elems = window.document.querySelectorAll('*');

for(var j = 0, s = elems.length; j < s; j++) {
    attachMouseEvents(elems[j]);
}

function attachMouseEvents(element){
    for(var k = 0, s = mouseEvents.length; k < s; k++){
        element.addEventListener(mouseEvents[k],
                                 mouseEventCallback(mouseEvents[k]),
                                 false);
    }
}

Answer 1

不要将事件处理程序附加到每个元素，而是使用event delegation。当事件被触发时，它会在DOM中向主体（或处理事件的第一个元素）进行缓冲，因此您可以处理正文事件处理程序中的所有事件。然后你有event.target属性，引用实际触发它的DOM元素

P.S。我已经链接了jQuery文档，但它是一般建议，而不仅仅是使用jQuery

Answer 2

你可以使用jQuery Universal Selector对所有元素使用jQuery和.bind事件，但是jquery * selector非常慢，并且事件委托比.bind更受欢迎。

$("*").bind(events...)

http://api.jquery.com/bind/

David Flangan的JavaScript作者：The Definite Guide说：

使用事件的一个难点是IE（直到IE9）实现了与所有其他浏览器不同的事件API。为了解决这个难题，jQuery定义了一个适用于所有浏览器的统一事件API。在简单的形式中，jQuery API比标准或IE事件API更容易使用。在其更复杂的全功能形式中，jQuery API比标准API更强大。“

如何改进这个javascript，将事件附加到页面中的所有元素？

2 个答案: