jqueryバインディングイベントの機能は何ですか

jquery バインディング イベントの機能: 通常のイベントを DOM ノードにバインドします。DOM ノードが選択されたら、それにイベントをバインドして、ユーザーが対応する操作を提供しやすくします。 jQuery には、bind、live、delegate、on という 4 つのイベント バインディング メソッドが用意されており、対応するアンリスニング関数は unbind、die、undelegate、off です。

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

イベントとは何ですか?

さまざまな訪問者に対するページの応答はイベントと呼ばれます。

イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。

例:

• マウスを要素上に移動します。

• ラジオ ボタンを選択します

• 要素をクリックします

「トリガー」という用語はイベント "(または "fire") でよく使用されます。 例: 「キーを押すと、keypress イベントが起動します。」

jquery イベント バインディング

通常、ある種のボタンがクリックされるなど、特定のノードの関連イベントを処理する必要があります。しかしここで問題があり、特定のノードが取得できれば言うことはありません。ただし、処理したいノードがまだ存在せず、そのイベント処理を事前に定義する必要がある場合があります。たとえば、UL では、各 LI をクリックすると関数が実行される必要があると言います。ただし、UL のコンテンツ自体は変更される可能性があり、最初は 2 つの LI しかありませんでしたが、その後 3 つの LI になり、追加の LI もイベントに応答できる必要があります。

上記の状況は一般的な要件です。イベントバブリングメカニズムを使用して目標を達成できます。イベント処理を UL にバインドし、LI がクリックされたときに上位 UL にバブルアップするようにします。これにより、イベントを処理するときに、次のステップのイベントがどのノードであるかを判断できます。

イベント バインディングは dom 要素のイベントであり、dom 要素にバインドされており、要素上で同じイベントを複数回監視できます。 機能:通常のイベントを DOM ノードにバインドします。DOM ノードが選択されたら、イベントをそれにバインドして、ユーザーが対応する操作を簡単に実行できるようにします。

jQuery には、bind、live、delegate、on という 4 つのイベント バインディング メソッドが用意されており、リッスンを解除する対応する関数は、unbind、die、undelegate、off です。

これらのメソッドの違い:

1.bind() 関数は既存の要素のイベントのみを設定できますが、live()、on() とデリゲートの両方を設定できます。 () 将来的に新しく追加される要素のイベント設定をサポートします;

2. jquery バージョン 1.7 より前は、bind() 関数が比較的人気がありました。バージョン 1.7 のリリース後、bind の正式な使用は推奨されなくなりました.(), 置換関数は on() で、これもバージョン 1.7 で新しく追加された関数です。同様に、live() 関数の置換に使用できます。live() 関数はバージョン 1.9 で削除されました;

3. live() 関数は delegate() 関数に似ていますが、live() 関数は実行速度、柔軟性、CSS セレクターのサポートの点で delegate() よりも劣ります

4 .bind() は Jquery のすべてのバージョンをサポートします; live() は jquery1.9 をサポートします; delegate() は jquery1.4.2 をサポートします; on() は jquery1.7 をサポートします;

以下にこれらのメソッドを紹介します詳細:

1.bind(type,[data],function(eventObject))

Bind はより頻繁に使用されるタイプで、その機能は次のとおりです。選択した要素に特定の要素をバインドします。イベント タイプ リスニング関数の意味は次のとおりです:

type: イベント タイプ (クリック、変更、マウスオーバーなど);

data: リスニング関数に渡され、event.data を通じて取得されたパラメータが到着します。オプション;

関数: リスニング関数。イベント オブジェクトを渡すことができます。ここでのイベントは、jQuery によってカプセル化されたイベント オブジェクトであり、ネイティブのイベント オブジェクトとは異なります。使用する場合は注意が必要です

binding ソースコード:

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

$('#myol li').bind('click',getHtml);

bind の特徴は、リスナーと対象の要素を 1 対 1 でバインドすることですが、ページ上の要素がバインドされる場合に使用しても問題ありません。動的に追加することはできません。ただし、「リスト要素 5」がリストに動的に追加された場合、それをクリックしても応答がないため、再度バインドする必要があります。この問題を回避するには、live を使用します。

jQuery には、a.click(function(){});、a.change(function(){}); などのイベント バインディングの短縮方法もあります。それらの関数は次と同じです。 binding ですが、それは単なる略語です。

2. live(type, [data], fn)

live のパラメーターはバインドと同じです。何がおかしいのでしょうか?見てみましょう。最初にソース コードを参照してください。 :

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

ライブ メソッドがリスナーをそれ自体 (this) にバインドせず、this.context にバインドしていることがわかります。このコンテキストは何ですか?実際、これは要素の限られた範囲です。次のコードを読めば明らかになります:

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

3、delegate和on

live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。

终于看到on的真实作用了，那么，这么多的事件绑定方式，我们该如何进行选择呢?

其实这个问题是完全不必纠结的，因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。不过官方有一个推荐就是尽量使用on，因为其他 方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了，真正理 解它们的区别之后自然而然也就不是难事了。

【推荐学习：jQuery视频教程、web前端视频】

以上がjqueryバインディングイベントの機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。