イベント依頼(イベントエージェント)とイベントバブルの概要
1770 ワード
イベントバブル:サブエレメントのイベントがトリガーされ、その上位エレメントのイベントも再帰的にトリガーされます.
イベント依頼:イベントバブルの原理を用いて,あるイベントをトリガーする要素から,イベントを再帰的に上位要素に伝播する.
イベント依頼のメリット:
1)大量に処理する要素については、各要素にイベントをバインドする必要はなく、親要素に一度バインドするだけでパフォーマンスが向上します.
2)動的挿入DOMの要素を扱うことができ,動的挿入DOMの要素を直接バインドすることはできない.
イベント委任について質問があります.イベントが親要素に委任された後、イベントがどのサブ要素によってトリガーされたかをどのように知るか.
答え:event.targetオブジェクトを取得します.
イベント依頼:イベントバブルの原理を用いて,あるイベントをトリガーする要素から,イベントを再帰的に上位要素に伝播する.
イベント依頼のメリット:
1)大量に処理する要素については、各要素にイベントをバインドする必要はなく、親要素に一度バインドするだけでパフォーマンスが向上します.
2)動的挿入DOMの要素を扱うことができ,動的挿入DOMの要素を直接バインドすることはできない.
イベント委任について質問があります.イベントが親要素に委任された後、イベントがどのサブ要素によってトリガーされたかをどのように知るか.
答え:event.targetオブジェクトを取得します.
<div class="button-group">
<button type="button" class="btn" id="btn1"> </button>
<button type="button" class="btn" id="btn2"> </button>
<button type="button" class="btn" id="btn3"> </button>
</div>
<script src="js/jquery-1.8.2.min.js"/>
<script>
$(".button-group").on('click', function(e) {
event.srcElement ? alert(event.srcElement.id) : alert(event.targete.target.id);
});
</script>
</code></pre>
<p><br/></p>
<p><span style="font-family:'Microsoft YaHei';font-size:14px;"> ：http://blog.csdn.net/zhouziyu2011/article/details/70198984</span></p>
<p><br/></p>
<p><span style="font-family:'Microsoft YaHei';font-size:14px;">jQuery bind()、live()、delegate()、on()、off()、one() 。</span></p>
<p><span style="font-family:'Microsoft YaHei';font-size:14px;"> ：http://blog.csdn.net/zhouziyu2011/article/details/53945994</span></p>
</div>
</div>
</div>
</div>