JavaScript イベント委任と jQuery イベント バインディングのオン、オフ、および 1

1. イベント委任
イベント委任とは何ですか?現実的な理解としては、ある日の正午に 100 人の生徒が速達を受け取りますが、この 100 人の生徒が同時に校門に立って待っていることは不可能であるため、ドアマンに荷物の受け取りを任せ、その後手渡すことになります。それを生徒たち一人一人に渡します。
jQuery では、イベント バブリング機能を使用して、子要素にバインドされたイベントを親要素 (または祖先要素) にバブリングさせて、関連する処理を実行します。
エンタープライズレベルのアプリケーションがレポート処理を行う場合、テーブルには 2000 行があり、各行には処理用のボタンがあります。
以前の .bind() 処理を使用する場合、2000 人のイベントをバインドする必要があり、ちょうど 2000 人の生徒が校門に立って
速達を待っているのと同じで、常に交差点をブロックし、さまざまな事故を引き起こすことになります。同じ状況がページにも当てはまり、ページが極端に遅くなったり、直接的に異常になったりする可能性があります。さらに、2000 個のボタンが ajax を使用してページ分割されている場合、.bind() メソッドはまだ存在しない要素を動的にバインドできません。たとえば、宅配業者が新しく転校してきた生徒の身元を確認できない場合、その生徒は宅配業者を受け取ることができない場合があります。
//HTML部分

<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>

//.bind()を使用すると動的バインディング関数がありません。元のボタンをクリックするだけで生成できます

$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});

//.live()を使用すると動的バインディング関数、jQuery1があります。 3 回の使用、jQuery1.7 以降廃止、jQuery1.9 で削除

$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});

live() の原理は、クリック イベントを祖先要素 $(document) にバインドすることであり、

を $( にバインドするだけです。ドキュメント) 2000 回ではなく 1 回。その後、動的に読み込まれる後続のボタンのクリック イベントを処理できます。
イベントを受け入れるとき、$(document) オブジェクトはイベント タイプ (event.type) とイベント ターゲット (event.target) をチェックします。 click

イベントが .button の場合、それに委任されたハンドラーが実行されます。 .live() メソッドは削除されているため、使用できません。テストして使用したい場合は、下位互換性のあるプラグインを導入する必要があります。

//.live()无法使用链接连缀调用，因为参数的特性导致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});

上記の例では、クローンを作成するために .clone() を使用しました。実際、イベントの動作をコピーしたい場合は、true: .clone(true) を渡すだけで済みます。これもイベント委任と同様の機能を実現できますが、原理はまったく異なります。
1 つはイベントの動作のコピー、もう 1 つはイベントの委任です。非クローン操作では、このような関数はイベント委任のみを使用できます。

$('.button').live('click', function () {
$(&#39;<input type="button" value="复制的" class="button" />&#39;).appendTo(&#39;#box&#39;);
});

イベントの委任を停止する必要がある場合は、.die() を使用してキャンセルできます。

$('.button').die('click');
由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、
又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持连缀调用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});

注: .delegate() は親要素を指定する必要があり、最初のパラメーターは現在の要素、2 番目のパラメーターはイベント メソッド、3 番目のパラメーターは実行関数です。 .bind() メソッドと同様に、追加のパラメーターを渡すことができます。 .undelegate() および .unbind()
メソッドは、.undelegate('click') などのすべてのイベントを直接削除できます。名前空間イベントを削除することもできます (例: .undelegate('click.abc'))。

注: .live()、.delegate()、および .bind() メソッドはどちらもイベント バインディングであるため、使用上の違いは明らかです。

2 つのルールに従います。 1. DOM 内の多くの要素は、同じイベント 2. DOM に今後の
要素バインディング イベントがない場合は、イベント デリゲート バインディング メソッドを使用することをお勧めします。それ以外の場合は、.bind() の通常のバインディングを使用することをお勧めします。

Ⅱ。 on、off、one
現在、イベントのバインドとバインド解除には 6 つのメソッドからなる 3 つのグループがあります。これら 3 つのグループが共存すると混乱が生じる可能性があるため、
このため、jQuery 1.7 以降では、最初の 3 つのグループを完全に放棄する .on() メソッドと .off() メソッドが導入されました。
/

/替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});

または

$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、
命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()
来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触
发一次的事件。
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
//类似于.delegate()只触发一次
$('#box).one('click', 'click', function () {
alert('one 仅触发一次！');
});

3. イベント委任の例:

html コード:

<div>
<input id="a" type="button" value="按钮1">
<input id="a" type="button" value="按钮2">
</div>

jQuery コード:

$('div').click(function(e){
alert('事件类型：'+ e.type + '，Value：' + $(e.target).val());
})

[ボタン 1] をクリックすると、ポップアップが表示されます: イベント タイプ: クリック, 値: ボタン 1。

注: e.type は、クリック、マウスダウンなどのオブジェクトのイベント タイプを返します。e.target は、イベントをトリガーした jQuery オブジェクトを返します。

IV. JQuery ライブラリの選択をサポートし、HTML、CSS、JS コードをテストできる JavaScript オンライン テスト ツールを推奨します

http://jsfiddle.net

上記は JavaScript イベント委任のオンとオフです。 jQuery イベント バインディングと 1 つのコンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。