jQueryイベントバインディングメソッド学習まとめ（推奨）-PHP开发-php.cn

jQueryイベントバインディングメソッド学習まとめ（推奨）

高洛峰

リリース： 2016-12-06 11:18:48

オリジナル

1312 人が閲覧しました

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() を使用してください。