イベントは、 動作を検出することが可能ではJavaScriptを指します。
イベントストリームは、 イベントページから受注を参照して、一連のイベントは、見開きで理解されています。
物事は、このようにされている可能性が
イベントのマイクロソフトIEの流れがイベントバブリング（eventbubbling）と呼ばれ、Microsoftはその後、徐々にではない以上、特定のノード（文書）に上向きに広がって、時間によってイベントが最も具体的な要素（文書内のノードの最も深いネストレベル）を受信し始めると考えています。
Netscape NavigatorはNetscapeののアイデアが少なく、特定のノードが以前のイベントを受信しなければならない、とほとんどの特定のノードが受信したイベントを持続させるべきです。
最後に、イベントフローの開発にW3Cは、3つのフェーズに分けられます。
- イベントキャプチャ：外部から内部へ
- ターゲット段階
- イベントは、バブリング：内側から、親要素の子要素は、子要素が親要素がメカニズムをバブリングトリガされるときにトリガ、同じイベントがあるとき。
私はこの記事では、イベントのメインフローの範囲を説明することです。見たインタビューの質問は、巨大なバブルが発生した場合に、最終的にどこ最後に尋ねた前ので。私は答えを知っていない、オンラインの検索結果に、答えは何の仲間ではありません、それを自分で行う必要がありました。私自身のテスト結果が出ています。何かがうまくいかない場合は「JavaScriptの高度なプログラミング」への参照、私を修正してください
モニター・イベントを達成するための二つの方法では
-
addEventListener(event,function,useCapture)- イベント：例えば、マウスのクリックイベントなどのイベント、文字列、「上」を入れする必要はありません、単に「クリック」書きます
- 機能：機能を実行するために、このメソッドを呼び出します
- useCapture：キャプチャ時にキャプチャ段階で、デフォルトはfalseであるかどうかは、イベントが実行されません
- これはIE8と下のをサポートしていません。
-
attachEvent(event,function)- イベント：イベント、文字列は、あなたは、「onclickの」書き込みにマウスクリックイベントのニーズとして、「上」を追加する必要があります
- 機能：機能を実行するために、このメソッドを呼び出します
- 以下IE8をサポートしてのみ、この機能は、イベントのキャプチャ段階は、（IE4はIE8まで泡立てるからのイベントの後に作られているので、IEはまた、イベントストリームイベントバブリング考慮されるべきであると主張）を参照することはできません。
-
あなたは両方のブラウザが対応したい場合は、次に我々は、リスナー関数を書いた聖歌
にあなたのコードに次の関数をコピーする
パラメータ：- あなたが要素に到達する要素
- あなたが時間を監視するイベントの文字列型、
- コールバックコールバック関数
- ブールboolean型
- あなたは、充填falseにバブリング段階を聞きたい場合は
- あなたは真埋めるためにキャプチャ段階を聞きたい場合は
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
イベントフローの範囲
ここで私はあなたがそれを自分で試すことができ、イベントのキャプチャの範囲、最終的には付属のコードを紹介します。
1. E11-IE9、および他のブラウザ（クロムは、Firefoxなど）は下記のように出力されています。
- イベントキャプチャステージ：
window-->document-->html-->body-->父元素-->子元素 - イベントバブリングフェーズ：
子元素-->父元素-->body-->html-->document-->window
イベントキャプチャウィンドウには、最初から、最後に窓のバブリング処理が終了しています。
2. IE8、IE6と出力が示されている、すなわち
- イベントバブリングフェーズ：
子元素-->父元素-->body-->html-->document
最後を文書化するプロセスをバブリング最後のイベント。
2の出力は、次のコードを見ては知っているだろう、なぜ、私がトップに定義されたリスナー関数を使用して説明し、モニタ機能は、IE8には、次のattachEventを使用すること、それは私がモニター上のリスクを書いたことを、ブール・パラメータを必要としません。コードの気泡と捕捉は捕捉として実行されます。
しかし、これはまた、順序と位置コードは大丈夫嘆き捕獲され、見ることができます。
3.終了していません。IE5.5とバージョンの下の「プログラミングJavaScriptの高度な」、スキップします言う<html>：イベントは、位相をバブリングすることを意味ラベルを、子元素-->父元素-->body-->document
しかし、私は実際に下のIE5をテストします。子元素-->父元素-->body-->html-->document
しかし、また、文書の最後にプロセスをバブリング最後のイベント。
コード
CSS：
#mydiv {
width: 150px;
height: 150px;
padding: 20px;
background-color: antiquewhite;
}
#mypar {
width: 100px;
height: 100px;
background-color: seagreen;
}
HTML：
<div id="mydiv">
<p id="mypar"></p>
</div>
JS
var p = document.getElementById("mypar");
var div = document.getElementById("mydiv");
var body = document.getElementsByTagName("body")[0];
var html = document.getElementsByTagName("html")[0];
//捕获
addEvent(p, 'click', function() {console.log('p')}, true);
addEvent(div, 'click', function() {console.log('div')}, true);
addEvent(body, 'click', function() {console.log('body')}, true);
addEvent(html, 'click', function() {console.log('html')}, true);
addEvent(document, 'click', function() {console.log('document')}, true);
addEvent(window, 'click', function() {console.log('window')}, true);
//冒泡
addEvent(p, 'click', function() {console.log('p')}, false);
addEvent(div, 'click', function() {console.log('div')}, false);
addEvent(body, 'click', function() {console.log('body')}, false);
addEvent(html, 'click', function() {console.log('html')}, false);
addEvent(document, 'click', function() {console.log('document')}, false);
addEvent(window, 'click', function() {console.log('window')}, false);
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
私は行き止まりに愛して、羅リアンです
