jQueryライブイベントの使い方を詳しく解説-jsチュートリアル-php.cn

jQueryライブイベントの使い方を詳しく解説

黄舟

リリース： 2017-06-26 09:16:12

オリジナル

1397 人が閲覧しました

概要

jQuery は、要素が後で追加された場合でも、一致するすべての要素に event handler 関数を付加します。

このメソッドは基本的に .bind() メソッドの変形です。 .bind() を使用する場合、セレクターによって一致した要素にはイベントハンドラーが付加されますが、後で追加された要素にはイベントハンドラーが付加されません。これには、.bind() を再度使用する必要があります。たとえば、

<body>
  <div class="clickme">Click here</div>
</body>

ログイン後にコピー

は、単純なクリックイベントをこの要素にバインドできます。

$(&#39;.clickme&#39;).bind(&#39;click&#39;, function() {
  alert("Bound handler called.");
});

ログイン後にコピー

要素がクリックされると、アラートボックスがポップアップします。そして、この後にさらに別の要素が追加されたとします。

$(&#39;body&#39;).append(&#39;<div class="clickme">Another target</div>&#39;);

ログイン後にコピー

この新しい要素はセレクター「.clickme」にも一致しますが、この要素は .bind() を呼び出した後に追加されるため、この要素をクリックしても効果はありません。

.live() は、この状況に対処するメソッドを提供します。次のようにクリックイベントをバインドした場合:

$(&#39;.clickme&#39;).live(&#39;click&#39;, function() {
  alert("Live handler called."); 
});

ログイン後にコピー

次に、新しい要素を追加します:

$(&#39;body&#39;).append(&#39;<div class="clickme">Another target</div>&#39;);

ログイン後にコピー

その後、新しい要素をクリックすると、イベントハンドラーをトリガーできます。

Event Delegate

.live() メソッドは、イベント委任の使用により、DOM に追加されていない要素に対して有効である可能性があります。祖先要素にバインドされたイベントハンドラーは、子孫でトリガーされたイベントに応答できます。 .live() に渡されるイベントハンドラーは要素にバインドされませんが、特別なイベントハンドラーとして扱われ、DOM ツリーのルートノードにバインドされます。この例では、新しい要素がクリックされると、次のステップが発生します:

クリックイベントを生成し、それを処理のために

に渡します

イベントは DOM ツリーのルートノードまでバブルアップし続けます。この特別なイベントハンドラーはデフォルトでそれにバインドされます。

.live() によってバインドされた特別なクリックイベント処理関数を実行します。

このイベント処理関数は、まずイベントオブジェクトのターゲットを検出し、続行する必要があるかどうかを判断します。このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをチェックすることによって実装されます。

一致する要素が見つかった場合、元のイベントハンドラーが呼び出されます。

上記の手順 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加された要素がこのイベントに応答できます。

追記

.live() は便利ですが、その特殊な実装のため、いかなる場合でも単純に .bind() を置き換えることはできません。主な違いは次のとおりです。

jQuery 1.4 では、.live() メソッドはカスタムイベントをサポートし、すべての JavaScript イベントもサポートします。 jQuery 1.4.1 では、フォーカスイベントとブルーイベント (より適切なバブリング focusin および focusout にマップされます) もサポートされています。さらに、jQuery 1.4.1 では、ホバー (「mouseenter Mouseleave」にマッピング) もサポートされます。ただし、jQuery 1.3.x では、サポートされている JavaScript イベントとカスタムイベント (click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover、mouseup) のみがサポートされています。

.live() は要素をサポートしません。 DOM トラバーサル経由で見つかったものは完全にサポートされています。代わりに、前の例で述べたように、常にセレクターの直後に .live() メソッドを使用する必要があります。

イベント処理関数が .live() にバインドされており、他のイベント処理関数の実行を停止したい場合、この関数は false を返す必要があります。単に .stopPropagation() を呼び出すだけではこれは実現できません。

イベントバインディングの詳細については、.bind() メソッドを参照してください。

jQuery 1.4.1 では、.live() は複数のイベントを受け入れ、イベントをスペースで区切って、.bind() と同様の関数を提供できます。たとえば、次のように、マウスオーバーイベントとマウスアウトイベントの両方を「ライブ」バインドできます:

$(&#39;.hoverme&#39;).live(&#39;mouseover mouseout&#39;, function(event) {
  if (event.type == &#39;mouseover&#39;) {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

ログイン後にコピー

jQuery 1.4.3 の場合: 1 つ以上のイベントタイプを string と関数データマップにバインドして実行できます。jQuery では

$("a").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

ログイン後にコピー

1.4 では、data パラメーターを使用して追加情報をイベントハンドラーに渡すことができます。クロージャによって発生する問題に対処するのに適しています。詳細については、.bind() の説明を参照してください。

jQuery 1.4 では、ライブイベントをデフォルトのドキュメントルートの代わりに「コンテキスト」DOM 要素にバインドできます。このコンテキストを設定するには、(jQuery コレクションやセレクターではなく) 単一の DOM 要素で jQuery() 関数の 2 番目の引数を使用します。

$(&#39;div.clickme&#39;, $(&#39;#container&#39;)[0]).live(&#39;click&#39;, function() {
  // Live handler called.
});

ログイン後にコピー

参数

type,[fn]String,FunctionV1.3

type:一个或多个事件类型，由空格分隔多个事件。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,[data],falseString,Array,boolV1.4

type:一个或多个事件类型，由空格分隔多个事件。

data:传递给事件处理函数的附加参数

false:设置为false会使默认的动作失效。

eventStringV1.4.3

一个或多个事件类型的字符串和函数的数据映射来执行他们

示例

描述:

点击生成的p依然据有同样的功能。

HTML 代码:

<p>Click me!</p>

ログイン後にコピー

jQuery 代码:

$("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });

ログイン後にコピー

描述:

阻止默认事件行为和事件冒泡，返回 false

jQuery 代码:

$("a").live("click", function() { return false; });

ログイン後にコピー

描述:

仅仅阻止默认事件行为

jQuery 代码:

$("a").live("click", function(event){ event.preventDefault(); });

ログイン後にコピー

这是代码，用live绑定的事件不执行，但是创建的元素能添加进去。这是为什么

jQueryライブイベントの使い方を詳しく解説

你的_html是字符串啊，你是不是要点击li触发事件？
那应该是

$(&#39;li&#39;).live(&#39;click&#39;,function(){....})

ログイン後にコピー

以上がjQueryライブイベントの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jQueryライブイベントの使い方を詳しく解説