DOMレベルのイベントとDOM
DOMレベルの合計は、4つのレベルに分けることができますDOM0レベル、DOM1レベル、DOM2とDOM3学年レベル、およびDOMイベントは3つのレベルに分類されます。DOM0レベルのイベントハンドラ、DOM2レベルのイベント処理とイベントDOM3レベルを扱います。下図のように：
なぜ、それを処理するためにDOM1レベルのイベントをしませんでしたか？
レベル1 DOM標準はイベント関連のコンテンツを定義していないので、これはいわゆるレベル1 DOMイベントモデルにはありません。
1.DOM0レベルのイベント
DOM0レベルのイベントを見る前に、我々は最初のHTMLイベントハンドラを理解する必要があり、それは、イベント処理コードのこの種の最初として、次のされています。
<button type="button" onclick="showFn()"></button>
<script>
function showFn() {
alert('Hello World');
}
</script>
私たちは、HTMLコード内で直接のonclick属性を通過した上記のコードは、トリガーshowFn方法、我々は次の2つの場所を変更する必要が関数の名前を変更する必要が一度強く、HTML JSに結合され、このようなイベントハンドラの最大の欠点を定義します。もちろん、利点は、結合操作のDOMイベントを完了するために必要とされていません。
だから、DOM0レベルの処理事件は何ですか？DOM0・レベルのイベントのようなイベントハンドラ属性に機能を割り当てることです。
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Hello World');
}
// btn.onclick = null; 解绑事件 释放占用内存；
</script>
我々は、コード上のボタンは、JSによって、このボタンのIDは、ID取得し、onclickのイベントハンドラ属性に割り当てられた機能を定義し、そのようなアプローチは、イベントを処理DOM0のレベルを反映している与えます。私たちは、イベントハンドラプロパティにはnullを割り当てることにより、イベントをアンバンドルすることができます。
DOM0レベルのイベントハンドラの欠点は、同じハンドラが同時にバインド複数の処理機能は、私はボタンのクリックイベントに加えて、他の機能に希望することはできませんのようなことです。例えば：
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Hello World');
} // 被覆盖，并不执行
btn.onclick = function() {
alert('Hello JavaScript');
}
// btn.onclick = null; 解绑事件 释放占用内存；
</script>
2.DOM2レベルのイベント
DOM0レベルのイベントに基づいてDOM2レベルのイベントハンドラを補う複数のハンドラを追加するためのハンドラを可能にしながら機能を処理する多くの欠点をバインドすることはできません。コードは以下の通りであります：
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
function showFn() {
alert('Hello World');
}
btn.addEventListener('click', showFn, false);
// btn.removeEventListener('click', showFn, false); 解绑事件
</script>
DOM2レベルのイベントは、2つの方法のaddEventListenerとにremoveEventListenerを定義し、バインド調整タイイベントに使用された、方法は、3つのパラメータ、すなわち、結合イベントハンドリングプロパティ名（に含まれていない）を含み、及びハンドラキャプチャかイベントハンドラ関数。我々は、マウスの中にメソッドを追加する必要がある場合は、単に：
btn.addEventListener('mouseover', showFn, false);
ボタンをクリックするとshowFnこのメソッドをトリガーし、マウスを移動します。
ランクバージョン以下IE8が達成するためには、addEventListenerとにremoveEventListener、およびdetachEvent attachEventニーズをサポートしていないことに注意してください。
btn.attachEvent('onclick', showFn); // 绑定事件
btn.detachEvent('onclick', showFn); // 解绑事件
IE8のバージョンのみバブリング型イベントのランクの下にサポートしているので、ここでは、第三引数を渡す必要はありません。
3.DOM3レベルのイベント
次のようなイベントの多くの種類を追加するDOM2レベルのイベントに基づいてDOM3レベルのイベント、すべての種類は次のとおりです。
負荷、スクロール：UIのようなユーザとページトリガ上の相互作用要素は、イベント、
要素ゲインイベントが発生するフォーカスやフォーカスを失った、など：ぼかし、フォーカス
マウスイベントページのような操作を実行するときに、マウスを介してユーザがトリガ：dbclick、のmouseUp
などのマウスホイールまたは類似の装置を使用する場合がトリガされるホイールイベント、：マウスホイールの
ようなテキスト・イベント、文書トリガー内のテキストを入力し、：にtextInput
ユーザーがキーボードを介してページの操作を行うと、キーボードイベントは、トリガ例えば：のKeyDown、キー押下
合成イベントである場合のようなIME（インプットメソッドエディタ）トリガ入力文字：compositionstartの
変更イベントが発生したときのような根本的なDOMの構造変化、：DOMsubtreeModified
一方DOM3レベルのイベントは、ユーザーがイベントの一部をカスタマイズすることができます。
DOMイベントフロー
キャプチャ段階で指定されたイベントを実行するかどうかのaddEventListenerの上記第三のパラメータに、キャプチャ段階でイベントを実行するには、trueに設定し、そして相をバブリングイベントで実行するようにfalseに設定されています。だから、イベントバブリングやイベントのキャプチャ、それは何ですか？図は以下で説明しました：
1.イベントバブリング
いわゆるイベントバブリングイベントは、このような上記イベント対象の図のラベルとして、層によって層を取るのpをトリガーすると同時に、ラベルをクリックして、李にイベントをクリックして起動する最高の場所から発生した気泡と同じです最も外側またはHTML文書まで層ごとアップ。次のサンプルコードは次のとおりです。
<div id="box">
<a id="child">事件冒泡</a>
</div>
<script>
var box = document.getElementById('box'),
child = document.getElementById('child');
child.addEventListener('click', function() {
alert('我是目标事件');
}, false);
box.addEventListener('click', function() {
alert('事件冒泡至DIV');
}, false);
</script>
上記のコードを実行した後、我々が最初にポップアップ表示されます]タブをクリックし、プロンプト「私は、対象イベントだ」、その後、内側からバブルへのイベントを説明するだろうヒント、「DIVにイベントバブリング」をポップアップ表示されます。
それでは、どのよう我々はそれをバブリングイベントを停止していますか？次のようにここにstopPropagationメソッドEventオブジェクトは、イベントが含まれます。
child.addEventListener('click', function(e) {
alert('我是目标事件');
e.stopPropagation();
}, false);
stopPropagationプラス法の後、我々は、ラベルを再度クリックdivの上のクリックイベントをトリガしません。
2.イベントキャプチャ
イベントバブリングコントラスト、イベントのキャプチャが上から下に実行されると、私たちはライン上の真にaddEventListenerを三番目のパラメータにする必要があります。
<div id="box">
<a id="child">事件冒泡</a>
</div>
<script>
var box = document.getElementById('box'),
child = document.getElementById('child');
child.addEventListener('click', function() {
alert('我是目标事件');
}, true);
box.addEventListener('click', function() {
alert('事件冒泡至DIV');
}, true);
</script>
この時点で、我々はラベルをクリックして、最初のポップアップは、ポップアップが続く「DIVにイベントバブリングは」、「Iは、対象イベントだ」と、イベントがちょうど反対をバブリングされています。
