イベントフロー：2つのタイプがあります。 IEはイベントバブルフローです。イベントが開始されると、最も特定の要素から受信され、上向きの要素から段階的に段階的に伝播します（要素 - >ドキュメント）。対照的に、Netscapeのイベントキャプチャストリーム。
DOM2レベルのイベントは、イベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブルステージの3つのステージが含まれることを規定しています。
ほとんどの場合、イベントストリームにイベントハンドラーを追加することのバブルフェーズです。 eventutilの栗：
var eventutil = {addhandler：function（element、type、handler）{if（element.addeventlistener）{element.addeventlistener（inty、handler、false）; } else if（element.attachevent）{element.attachevent（ 'on' + type、handler）; // ie8} else {element ['on' + type] = handler; }}、removehandler：function（）{...}}以下で詳細に見てみましょう。
DOM0レベルイベントハンドラー
JavaScriptを使用してイベントハンドラーを指定する従来の方法は、イベントハンドラー属性に関数を割り当てることです。
各要素には独自のイベントハンドラー属性があります。これは、通常、OnClickなどのすべて小文字です。このプロパティの値を関数に設定すると、イベントハンドラーを指定できます。
var btn = document.getElementById（ 'mybtn'）; // add event handler btn.onclick = function（）{alert（this）; //はdom要素btn}; //イベントハンドラーbtn.onclick = nullを削除します。利点：1。シンプル2。クロスブラウザーの利点があります
短所：イベントハンドラーはコードが実行される前に指定されていないため、これらのコードはページのボタンの後ろに配置されるため、一定期間後には応答が受信されず、ユーザーエクスペリエンスが悪化する可能性があります。
DOM2レベルイベントハンドラー
イベントハンドラーを指定および削除する操作を処理する2つのメソッドが定義されています：AddEventListener（）とRemoveEventListener（）。 3つのパラメーター、1。処理されるイベントの名前。 2。イベントハンドラーとして機能3。ブール値。最後のブール値は真です。つまり、イベントハンドラーはキャプチャステージで呼び出され、falseはイベントハンドラーがバブルステージで呼び出されることを意味します。
//複数のイベントハンドラーを追加するvar btn = document.getElementbyId（ 'mybtn'）; btn.addeventlistener（ 'click'、function（）{alert（this）; // dom element btn}、false）; btn.removeeventListener（ 'click'、function（）{//匿名関数を削除できない、削除に失敗する}、false）; // var handler = function（）{alert（this.id）; }; btn.addeventlistener（ 'click'、handler、false）; //イベントハンドラーをもう一度削除するbtn.removeeventlistener（ 'click'、handler、false）; //正常に削除しますこれらの2つのイベントハンドラーは、追加される順序で発射されます。ほとんどの場合、イベントハンドラーはイベントストリームのバブルステージに追加されます。これは、ブラウザのさまざまなバージョンとの互換性を最大限にすることができます。
利点：1つの要素が複数のイベントハンドラーを追加できます
短所：IE8以下のブラウザは、DOM2レベルのイベントハンドラーをサポートしていません。 （IE8を含む）
IEイベントハンドラー
上記と同様に、2つの方法が定義されています。AttachEvent（）、Detachevent（）。これらの2つの方法は、イベントハンドラー名とイベントハンドラー機能の同じ2つのパラメーターを受け取ります。 IE8以前のバージョンはイベントバブルのみをサポートするため、Detachevent（）を介して追加されたイベントハンドラーがバブルフェーズに追加されます。
var btn = document.getElementById（ 'mybtn'）; btn.attachevent（ 'onclick'、function（）{alert（this）; // window}）; btn.attachevent（ 'onclick'、funciton（）{alert（ "hello、world"）;}）;ボタンをクリックすると、これら2つのイベントハンドラーのトリガー順序は、上記の反対です。イベントハンドラーが追加される順序でトリガーされていませんが、正反対です。
利点：1つの要素が複数のイベントハンドラーを追加できます
短所：サポートのみIE。
クロスブラウザーイベントハンドラー
例えば：
var eventutil = {addhandler：function（ele、type、handler）{if（ele.addeventlistener）{ele.addeventlistener（type、handler、false）; } else if（ele.attachevent）{ele.attachevent（ 'on' + type、handler）; } else {ele ['on' + type] = handler}}、removehandler：function（ele、type、handler）{if（ele.removeeventlistener）{ele.removeeventlistener（タイプ、ハンドラー、false）; } else if（ele.detachevent）{ele.detachevent（ 'on' + type、handler）; } else {ele ['on' + type] = null; }}}