ホームページ > 記事 > ウェブフロントエンド > jQueryライブイベントの使い方を詳しく解説

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

黄舟オリジナル: 2017-06-26 09:16:121398ブラウズ

概要

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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQueryのunbind()メソッドの使用例次の記事：jQueryのunbind()メソッドの使用例

続きを見る