イベント結合の一般的な方法：従来の結合、W3C結合法、およびIE結合法。ただし、実際の開発において私たちにとって重要なのは、一般的なクロスブラウザーバインディング方法を必要とすることです。インターネットで検索すると、多くの方法が見つかります。ここにいくつかのよりよく知られている方法があります：
学期を開始する前に、優れたAddEvent（）メソッドがどのような要件を満たすべきかを議論する必要があります。
a。同じ要素をサポートする同じイベントハンドルは、複数のリスニング関数をバインドできます。
b。同じ機能が同じ要素の同じイベントハンドルで複数回登録されている場合、最初の登録後のすべての登録は無視されます。
c。これは、関数本文で、イベントを処理しているノード（現在イベントハンドラーを実行しているノードなど）を指す必要があります。
d。リスニング関数の実行順序は、バウンド順序で実行する必要があります。
e。 Event = event ||を使用しないでくださいwindow.event;イベントオブジェクトを正規化する関数本体。
1。JohnResigによって書かれたAddEvent（）関数
関数addEvent（obj、type、fn）{if（obj.attachevent）{obj ['e'+type+fn] = fn; obj [type+fn] = function（）{obj ['e'+type+fn]（window.event）;} obj.attachevent（ 'on'+type、obj [type+fn]）; } else obj.addeventlistener（type、fn、false）; } function removeEvent（obj、type、fn）{if（obj.detachevent）{obj.detachevent（ 'on'+type、obj [type+fn]）; obj [type+fn] = null; } else obj.removeeventlistener（type、fn、false）; }この機能がとてもシンプルで理解しやすいことは本当に驚くべきことです。その後、上記の5つの要件を検討する必要があります。
最初のポイントに満足。
私は3番目と5番目のポイントに満足していたに違いありません。
2番目のポイントでは、AddEventListener（）が重複登録を無視しているのに対し、AttherEvent（）はそうではありません。
ただし、DOM標準はオブジェクトを呼び出す時間処理関数の順序を決定しないため、4番目のポイントは満たされません。
しかし、この機能は依然として非常に良い機能です。
2。ディーン・エドワードによって書かれたaddevent（）関数
関数addEvent（要素、タイプ、ハンドラー）{if（！handler。$$ guid）ハンドラー。$$ guid = addevent.guid ++; if（！element.events）element.events = {}; var handlers = element.events [type]; if（！handlers）{handlers = element.events [type] = {}; if（element ["on" + type]）{handlers [0] = element ["on" + type]; }} Handlers [Handler。$$ guid] = Handler; element ["on" + type] = handleevent;} addevent.guid = 1;関数removeEvent（要素、タイプ、ハンドラー）{if（element.events && element.events [type]）{delete element.events [type] [handler。$$ guid]; }} function handleEvent（event）{var returnValue = true;イベント=イベント|| fixevent（window.event）; var handlers = this.events [event.type]; for（var i in handlers）{this。$$ handleevent = handlers [i]; if（this。$$ handerevent（event）=== false）{returnValue = false; }} return returnValue;}; function fixevent（event）{event.preventdefault = fixevent.preventdefault; event.stoppropagation = fixevent.stoppropagation; return event;}; fixevent.preventdefault = function（）{this.returnvalue = false;}; fixevent.stoppropagation = function（）{this.cancelbubble = true;};この関数は従来のバインディング方法を使用するため、メモリリークを引き起こすことなく、すべてのブラウザーで機能します。
しかし、当初提案されていた5ポイントでは、関数は最初の4つのポイントのみを満たします。 JavaScriptでは、in/inステートメントの実行の順序が割り当ての順序で指定されていないため、最後のポイントのみが満たされません。
3。ディーン・エドワードのAddEvent（）関数の改善
array.prototype.indexof = function（obj）{var result = -1、length = this.length、i = length -1; for（; i> = 0; i--）{if（this [i] == obj）{result = i;壊す; }} return result;} array.prototype.contains = function（obj）{return（this.indexof（obj）> = 0）} array.prototype.append = function（obj、nodup）{if（！（nodup && this.contains（obj）））{{this.length = obj; }} array.prototype.remove = function（obj）{var index = this.indexof（obj）; if（！index）return; return this.splice（index、1）;}; function addevent（element、type、fun）{if（！element.events）ement.events = {}; var handlers = element.events [type]; if（！handlers）{handlers = element.events [type] = []; if（element ['on' + type]）{handlers [0] = element ['on' + type]; }} handlers.append（fun、true）element ['on' + type] = handleevent;} function removevent（element、type、fun）{if（element.events && ement.events [type]）{element.events [type] .remove（fun）; }} function handleEvent（event）{var returnValue = true、i = 0;イベント=イベント|| fixevent（window.event）; var handlers = this.events [event.type]、length = handlers.length; for（; i <length; i ++）{if（handlers [i] .call（this、event）=== false）{returnValue = false; }} return returnValue;} function fixevent（event）{event.preventdefault = fixevent.preventdefault; event.stoppropagation = fixevent.stoppropagation; return event;} fixevent.preventdefault = function（）{this.returnvalue = false;}; fixevent.stoppropagation = function（）{this.cancelbubble = true;};この関数は、Dean EdwardのAddEvent（）関数に対する私の改善であり、5つの初期要件を完全に満たしています。みんなの学習に役立つことを願っています。読んでくれてありがとう。