jQueryバインディングイベントリスナーbindとイベントリスナー削除unbind_jqueryの使用例を詳しく解説-jsチュートリアル-php.cn

jQueryバインディングイベントリスナーbindとイベントリスナー削除unbind_jqueryの使用例を詳しく解説

WBOY

リリース： 2016-05-16 15:19:13

オリジナル

1977 人が閲覧しました

この記事の例では、jQuery バインディングイベントリスナーバインドの使用法とイベントリスナーアンバインドの削除について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

ここではそれぞれ、オプションのパラメータとしてbind(eventType,[data],Listener)//dataを使用します。one()メソッドでバインドされたイベントは、一度トリガーされた後に自動的に削除されます。unbind(eventType,Listener),

例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

ログイン後にコピー

このテストコードをもう一度見てください:

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

ログイン後にコピー

JQuery コード:

$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}

ログイン後にコピー

alert("aaaa") は 3 回実行されます。イベントがネストされた場合、そのような状況を見たくない場合は、この時点で上位レベルのイベントを無効にする必要があります。問題を解決するには関数のバインドを解除します。

機能の紹介:

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

ログイン後にコピー

alert("aaa"); は 1 回だけ実行されます。

bind() メソッドは、選択した要素に 1 つ以上のイベントハンドラーを追加し、イベントの発生時に実行する関数を指定します
unbind() メソッドは、選択した要素のイベントハンドラーを削除します。イベントの発生時に、すべてまたは選択したイベントハンドラーを削除したり、指定された関数の実行を終了したりする機能。

event はイベントタイプです。タイプには、blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change が含まれます。、select、submit、keydown、keypress、keyup、error など、もちろんカスタム名にすることもできます。

data はオプションのパラメーターであり、event.data 属性値はイベントオブジェクトの追加データオブジェクトに渡されます。
関数はバインディングに使用される処理関数です。

文法:

$(selector).bind(event,data,function)

イベントと関数は、説明のために次のコードスニペットを指す必要があります:

例 1: p のすべてのイベントを削除します

コードをコピーコードは次のとおりです:

$("p").unbind();

例 2: p
のクリックイベントを削除する

コードをコピーコードは次のとおりです:

$("p").unbind("click");

例 2: p 要素のクリックイベントを削除した後にトリガーされるテスト関数と、p 要素のクリックイベントを追加した後にトリガーされるテスト関数

$("p").unbind("click",test);
$("p").bind("click",test);

ログイン後にコピー

注: .bind() を定義するには、どのイベントと関数を指定する必要があります

ここで簡単なデモを見てみましょう。div 全体にクリックによる折りたたみと展開のイベントがあります。リンクをクリックしても div のクリックイベントをトリガーしたくない場合は、リンクがクリックされたときに div のクリックイベントを無効にする必要があります。ここでは I link Mouseenter イベントを使用して、div イベントのバインドを解除し、削除します。この時点ではまだ終わりではありません。マウスがリンク領域に入ると、div のクリックイベントが削除されます。また、マウスがリンク領域から移動したときに、div のクリックイベントを復元する必要があります。リンクエリア。コードは次のとおりです:

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

ログイン後にコピー

event はイベントタイプです
…
function はバインドに使用される処理関数です。

jQuery イベントに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery の共通イベントの使用法とテクニックの概要」

をチェックしてください。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。