プロセスのメインイベントは、次の3つのフェーズた：キャプチャ段階、目標の段階、段階をバブリング;
1.キャプチャ段階を
、我々は要素にイベントをバインドする際に、プレイベントトリガーイベントのキャプチャ段階を経る
に示したように
、私たちのdivを登録しますイベントの標的捕捉段階として、ここでいうにイベントがキャプチャ段階を通過しますと、イベントは最外層から現在のイベントのバインド要素に発見されたイベントをクリックし、クリックイベントをトリガ（）。
2.目的のステージ
最外からイベントを連続的ターゲットノード、宛先ノードの最後のトリガ・イベントに送出。
3.イベントバブリング
イベントは、層ごとに、ここ一番外側の要素に出てくることでしょうトリガされた正反対のイベントのキャプチャである
私たちは例を見て
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#one {
width:300px;
height:200px;
background: red
}
#two {
width:250px;
height:150px;
background: blue
}
#three{
width:200px;
height:100px;
background: orange
}
</style>
</head>
<body>
<div id='one'>one
<div id='two'>two
<div id='three'>three</div>
</div>
</div>
</body>
<script type="text/javascript">
var three = document.getElementById('three');
one.onclick=function(){
console.log('one')
}
two.onclick=function(){
console.log('two')
}
three.onclick=function(){
console.log('three')
}
</script>
</html>
私たちは、最も内側のdivをクリックすると3は、登録したdivのクリックイベントだった与えます。
最も内側のdivクリックイベントが1つのレベルが出てくるだろう時に、出力三回は、これは、イベントバブリングのものである
ため、各要素が一度に行われるように、イベントの同じタイプにバインドされた3つのDIVに。
私たち普通の登録イベントは、イベントのバブリング段階で実行されていることを注意
などonclick、mouseover。そしてそうで
はなくmouseenterとmouseleaveイベントバブリングをトリガしません。
時々 、私たちはどのように、イベントのバブリング段階で実行したくありませんか？
1.イベント・オブジェクトによって提供されるstopPropagation()方法
three.onclick=function(e){
console.log('three');
e.stopPropagation();//停止
}
2. addEventListenerあなたは三番目のパラメータは、キャプチャまたはバブリング段階を実行することを決定したイベント登録イベントで変更することができ
、真のイベントのキャプチャ
偽イベントバブリングを
クリア要素のデフォルトの動作 e.preventDefault()
