JSにおけるバインディングイベント順序(イベント発泡とイベント捕獲の違い)


JSでは、バインディングされたイベントのデフォルトの実行時間は、キャプチャ段階(重要)ではなく発泡段階で実行される。これは、なぜ親と子が何らかのイベントにバインドされている場合、最初にサブバインディングされたイベントを呼び出し、親のイベントを呼び出してしまうのか。直接に次の例を見ます。

<!Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{margin:0;padding: 0;}
 </style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
 <div id="id2" style="height:200px; border:1px solid #000;">
 <div id="id3" style="height:50px; border:1px solid #000;"></div>
 </div>
</div>
</body>
<script type="text/javascript">
 var obj1=document.getElementById('id1'); 
 obj1.addEventListener('click',function(){
 alert('id1');
 },false);
 var obj2=document.getElementById('id2');
 obj2.addEventListener('click',function(){
 alert('id2');
 },true);
 var obj3=document.getElementById('id3');
 obj3.addEventListener('click',function(){
 alert('id3');
 },true);
 /*        true,          ,        false,          */
</script>
</html>
ID 3要素をクリックした場合、実行結果はid 2,id 3,id 1です。
Obj 2とObj 3を結びつける方法は捕獲段階で実行されるので、Obj 1のイベントは発泡段階で実行される。
締め括りをつける
JSでは、バインディングされたイベントのデフォルトの実行時間は、捕獲段階ではなく発泡段階で実行されるので、理解が必要である。
しかし,結合イベントを通して,イベント実行時間は発泡段階か捕獲段階かを指定できた。obj.addEventListener(event,function(){},bool)book:falseは、発泡段階を代表して実行します。
ブック:true、捕獲段階を代表して実行します。
JSは、デフォルトでイベントを取得すると、根底から全てのイベントの傍受対象を捕獲し、その後、泡立ち段階で順次実行する。捕獲段階は発泡段階の前にある。
泡を止める
w 3 cの方法はe.stopPropagation()で、IEはe.ccel Bbble=trueを使用します。
デフォルトの行動を阻止する
w 3 cの方法はe.preventDefault()で、IEはe.return Value=falseを使う。
JS事件の泡発生とon click、click、on()事件のトリガ順序について
on click、click、on()の優先関係:onclick>click>on();
onclickとclickが結合するイベントは、お互いの間でイベントの泡が発生する規則を遵守し、内部から外部に触発される。
on()バインディングされたイベントは、常にOclickとclickのバインディングより遅いイベントトリガである。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。