jQueryイベントバインディングメソッド学習まとめ（推奨）
- 高洛峰オリジナル
- 2016-12-06 11:18:481321ブラウズ
jQueryのイベントバインディングメソッドには、主にon()、bind()、delegate()、live()などがあります。以前に使用したことがあり、いくつかの方法があることは知っていますが、これらのイベントバインド方法の違いがわかりません。最も一般的に使用される方法は on メソッドですが、今日はそれを整理する予定です。
bind メソッド
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bind事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
alert($(this).text());
});
</script>
</body>
</html>
この方法でイベントをバインドする欠点:
ページ上に p 要素が多すぎると、ページ上に多数のイベント ハンドラーが発生し、ページの品質が低下します。パフォーマンス;
動的に生成された新しい要素にはクリック イベントはありません。
これら 2 つの欠点については、以下で紹介するデリゲート メソッドを通じて解決できます。
デリゲートメソッド
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
alert($(this).text());
});
</script>
</body>
</html>
上記の例では、イベント委任の原理を使用し、デリゲートを使用してイベントをバインドします。
イベントを p 要素に直接バインドしないでください。イベントをその親要素 (または祖先要素) にバインドします。div 内の任意の要素をクリックすると、イベントがイベント ターゲット (ターゲット要素) からレイヤーごとにポップアップされます。 ) イベントをバインドした要素 (この例の div 要素など) に到達するまでバブルします。バブリング プロセス中に、イベントの currentTarget がセレクターと一致すると、コードが実行されます。
これにより、bind() メソッドを使用する際の上記 2 つの問題が解決されます。イベントを p 要素に 1 つずつバインドする必要がなく、ページ上のイベント ハンドラーの数を効果的に削減できます。また、動的に追加されるイベントにバインドすることもできます。 p 要素を決定します。
このメソッドにも欠陥があります。この方法でバインドするのは簡単ですが、呼び出し時に問題が発生する可能性もあります。イベント ターゲットが DOM ツリーの非常に深いところにある場合、セレクターに一致する要素を見つけるためにレイヤーごとにバブリングすると、パフォーマンスに影響します。
bind と delegate のソース コードの実装
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
ソース コードから、bind() と delegate() の両方が実際には on() メソッドを通じて実装されていることがわかりますが、パラメーターが異なります。
onメソッド
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
alert($(this).text());
});
</script>
</body>
</html>
イベントを削除
bind()、delegate()、およびon()バインディングメソッドの場合、イベントを削除するメソッドは次のとおりです:
$( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );
概要
•セレクターによって一致する多くの要素がある場合は、反復バインディングに binding() を使用しないでください
•ID セレクターを使用する場合は、bind() を使用できます
•動的に追加された要素をバインドする必要がある場合は、delegate() を使用します。 ();
•delegate() メソッドと on() メソッドを使用し、DOM ツリーが深すぎないようにしてください;
•できるだけ on() を使用してください。