4

我正在开发一个 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);
    }
}
4

2 回答 2

6

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

PS 我已经链接了 jQuery 文档，但这是一般性建议，而不仅仅是使用 jQuery

于 2012-04-14T09:07:27.550 回答
0

您可以使用 jQuery 和 .bind 事件到所有元素使用 jQuery 通用选择器，但是 jquery * 选择器非常慢，并且事件委托优于 .bind。 

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

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

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

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

于 2012-04-14T09:13:35.727 回答