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

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

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

PS我已经链接了jQuery文档,但它是一般的建议,而不仅仅是使用jQuery