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 Universal Selectorを使用すると、jQueryおよび.bindイベントをすべての要素に使用できますが、jquery *セレクターは非常に低速であり、.bindよりもイベントの委任が優先されます。 

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

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

JavaScriptのDavidFlangan作者：TheDefiniteGuideは次のように述べています。

イベントを操作する際の問題の1つは、IE（IE9まで）が他のすべてのブラウザーとは異なるイベントAPIを実装することです。この問題に対処するために、jQueryはすべてのブラウザーで機能する統一イベントAPIを定義しています。単純な形式では、jQueryAPIは標準またはIEイベントAPIよりも使いやすいです。そして、より複雑なフル機能の形式では、jQueryAPIは標準のAPIよりも強力です。」

于 2012-04-14T09:13:35.727 に答える