jQueryイベントバインディングの使い方を詳しく解説(バインドとライブの違いも)_jquery

この記事では、jQuery イベント バインディングの使用法を例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

html:

<a href="#" onclick="addBtn()">addBtn</a>
<div id="mDiv">
  <button class="cBtn" onclick="alert(11111)">button1</button>
  <button class="cBtn">button2</button>
  <button class="cBtn">button3</button>
</div>

javascript:

<script type="text/javascript">
 function addBtn(){
   $('#mDiv').append(' <button class="cBtn">button5</button>')
 }
jQuery(function($){
//使用on代替live和delegate（live由于性能原因已经被废弃，被delegate代替）,新添加到mDiv的button依然会有绑定的事件
$('#mDiv').on('click','.cBtn',function(index, eleDom){
alert($(this).html())
 });
//使用on代替bind
$('.cBtn').on('click',function(){
alert($(this).html())
 })
//注意：
/*
1、无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）
2、要绑定自定义事件，如'open'，以上函数都可以使用，但激活需要使用trigger
总结：
建议使用on函数，绑定形式为$('.myClass').on({
click:function(eleDom){
...do someting...
},
dbclick:function(eleDom){
...do someting...
}
....
})
*/
}
</script>

いくつかのメモ:

bind(type,[data],fn) は、一致した要素ごとにイベント ハンドラーを特定のイベントにバインドします

違い:

.bind() は要素

.live() はバブリングを通じて要素にバインドされます。ドキュメント DOM ノードにバインドされたリスト タイプにより適しています。 .bind() の利点は、動的データをサポートしていることです。

.delegate() は小規模な使用向けのより正確なイベント プロキシであり、そのパフォーマンスは .live()

.on() は、新しいイベント バインディング メカニズム

追加: バインドとライブの違い

jQuery でイベントをバインドするには 3 つの方法があります。例としてクリック イベントを取り上げます。

(1)target.click(function(){});

(2)target.bind("click",function(){});

(3)target.live("click",function(){});

最初のメソッドは、実際、通常の JS の使用法と似ていますが、

2 番目と 3 番目のメソッドはすべてバインディング イベントですが、これらは大きく異なります。これは jQuery フレームワークを使用する場合によく使用されるため、この 2 つの違いに特に注意してください。

[バインドとライブの違い]

ライブ メソッドは実際にはバインド メソッドの変形であり、基本的な機能は両方ともイベントを要素にバインドしますが、バインド メソッドは現在存在する要素にのみイベントをバインドできます。ライブ メソッドは、後から JS やその他のメソッドを使用して新しく生成された要素に対しては無効です。ライブ メソッドは、対応するイベントを後で生成された要素にバインドすることもできます。では、ライブ メソッドのこの機能はどのように実装されているのでしょうか?以下でその実装原理について説明します。

ライブ メソッドが対応するイベントを後から生成される要素にもバインドできる理由は、いわゆる「イベント委任」によるもので、祖先要素にバインドされたイベントを子孫要素にバインドできることを意味します。使用。ライブ メソッドの処理メカニズムは、イベントを要素に直接バインドするのではなく、DOM ツリーのルート ノードにバインドすることです。例を挙げて説明します:

$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");

この新しく追加された要素をクリックすると、次の手順が実行されます:

(1) クリックイベントを生成し、処理のために div に渡します

(2) div に直接バインドされているイベントがないため、イベントは DOM ツリーに直接バブルアップされます

(3) イベントは DOM ツリーのルート ノードまでバブルアップし続けます。デフォルトでは、このクリック イベントはルート ノードにバインドされます。

(4) live でバインドされたクリックイベントを実行します

(5) イベントにバインドされたオブジェクトが存在するかどうかを検出し、バインドされたイベントを実行し続ける必要があるかどうかを判断します。イベントオブジェクトの検出は、
を検出することで行われます。

(6) Through the test of (5), if the object bound to the event exists, the bound event will be executed.

Since the live method will detect whether the object bound to the event exists only when an event occurs, the live method can implement later added elements and event binding. In contrast, bind will determine whether the element to which the event is bound exists during the binding phase of the event, and will only bind to the current element, not to the parent node.

According to the above analysis, the benefits of live are really great, so why should we use the bind method? The reason why jQuery retains the bind method instead of using the live method to replace bind is because live cannot completely replace bind in some cases. The main differences are as follows:

(1) The bind method can bind any JavaScript event, while the live method only supports click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup in jQuery 1.3. In jQuery In 1.4.1, focus and blue events are even supported (mapped to focusin and focusout, which are more suitable and can bubble up). In addition, in jQuery 1.4.1, hover (mapped to "mouseenter mouseleave") is also supported.

(2) live() does not fully support elements found through DOM traversal. Instead, you should always use the .live() method directly after a selector.

(3) When an element uses the live method to bind events, if you want to prevent the delivery or bubbling of events, you must return false in the function. Simply calling stopPropagation() cannot prevent the delivery of events. Or bubbling

Readers who are interested in more content related to jQuery events and methods can check out this site's special topic: "Summary of jQuery common event usage and techniques"

I hope this article will be helpful to everyone in jQuery programming.