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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

bind jquery イベントリスニング取り除くバインディング

この記事の例では、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 プログラミングのすべての人に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7426

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

小紅書でフォロワーを削除する方法. ブロックせずにフォロワーを削除する方法。 Mar 12, 2024 pm 04:40 PM

小紅書アプリでは誰もが多くの情報を入手できます。ここには多くの機能とサービスがあり、ユーザーはすべて自由に操作でき、自分のニーズに応じて、ここで対応する機能と操作を選択して問題を解決できます。あなたの質問の中には、特に便利なものもあります。毎日、これらのノートをたくさんお勧めします。内容が豊富で、広範囲をカバーしています。ここでどのコンテンツセクションを見たいかに関係なく、自由に選択できます。私たちはここにいるすべての人を満足させ、あなたの問題のいくつかを解決することができます。暇なときに、自分でさまざまなメモを投稿してみてください。おそらく誰でも多くのファンを獲得する機会があるので、何人かを失いたくないでしょう。ファンが注意すれば、これを削除することもできます

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトルフォックスウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレットソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアルボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

小紅書にサブアカウントをバインドするにはどうすればよいですか?アカウントが正常かどうかはどのように確認されますか? Mar 21, 2024 pm 10:11 PM

今日の情報爆発の時代において、個人のブランドや企業イメージの構築はますます重要になっています。中国を代表するファッションライフ共有プラットフォームとして、Xiaohongshu は多くのユーザーの注目と参加を集めています。影響力を拡大し、コンテンツ配信の効率化を図りたいユーザーにとって、サブアカウントの紐付けは有効な手段となっています。では、Xiaohongshu はどのようにしてサブアカウントをバインドするのでしょうか?アカウントが正常かどうかを確認するにはどうすればよいですか?この記事では、これらの質問に詳しく答えます。 1.Xiaohongshu でサブアカウントをバインドするにはどうすればよいですか? 1. メインアカウントにログインします。まず、Xiaohongshu メインアカウントにログインする必要があります。 2. 設定メニューを開きます。右上隅の「Me」をクリックし、「設定」を選択します。 3. アカウント管理に入る: 設定メニューで、「アカウント管理」または「アカウントアシスタント」オプションを見つけて、クリックします。

Toutiao で Douyin をバインドする手順と方法 Mar 22, 2024 pm 05:56 PM

1. Toutiaoを開きます。 2. 右下隅の「My」をクリックします。 3. ［システム設定］をクリックします。 4. ［アカウントとプライバシーの設定］をクリックします。 5. [Douyin]の右側のボタンをクリックしてDouyinをバインドします。

Cainiao アプリを Pinduoduo にバインドするにはどうすればよいですか? Cainiao Wrap を Pinduoduo プラットフォームに追加するにはどうすればよいですか? Mar 19, 2024 pm 02:30 PM

Cainiao アプリは、さまざまな物流情報を提供できるプラットフォームです。ここの機能は非常に強力で使いやすいです。物流関連の問題があれば、ここで解決できます。とにかく、それはあなたに 1 つをもたらすことができます-stopサービスはすべてを時間内に解決できます。速達の確認、速達の受け取り、速達の発送などはすべて問題なく行われます。さまざまなプラットフォームと連携しており、すべての情報を照会できます。しかし、場合によっては、 Pinduoduo で購入した商品は物流情報を表示できない場合がありますが、実際には、これを実現するには手動で Pinduoduo をバインドする必要があります。具体的な方法は以下に整理されており、誰でも見ることができます。 Cainiao を Pinduoduo アカウントにバインドする方法: 1. Cainiao APP を開き、メインページに移動します。

Cainiao APP を Pinduoduo にバインドする方法 Cainiao APP を Pinduoduo にバインドする方法 Mar 19, 2024 pm 05:16 PM

Cainiao Wrap を使用するときに Pinduoduo をバインドする方法をご存知ですか? Cainiao Wrap アプリの公式バージョンでは、このプラットフォーム上の Pinduoduo の物流情報の一部が自動的に同期されません。注文番号をコピーするか、携帯電話で確認するだけです。速達情報がある場合。もちろん、これらはすべて手動で完了する必要があります。さらに詳しく知りたい場合は、エディターに来て確認してください。 Cainiao APP を Pinduoduo にバインドする方法 1. Cainiao APP を開き、メインページの左上隅にある「パッケージガイド」をクリックします。 2. インターフェイスには、多くのショッピングサイトがあり、アカウントをバインドできます。 3. クリックして他の電子商取引プラットフォームをインポートします。 4. ユーザー認証: Pinduoduo をクリックしてインターフェイスに移動します。

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

私の小さなブラックボックスを Steam にバインドできない場合はどうすればよいですか? Mar 12, 2024 pm 03:10 PM

Black Box が Steam にバインドできないのは、ネットワークまたはソフトウェアのバージョンの問題が原因である可能性があります。この小さなブラックボックスには、リリース済みおよび今後発売予定のゲームの価格、コンピュータの構成要件とレビュー、詳細なゲームプレイ分析などの情報が含まれています。さらに、ユーザーはいつでもどこでもモバイルデバイスを通じて必要な情報を見つけることができます。小さなブラックボックスを Steam にバインドできない場合の対処方法 1. ネットワークの状態を確認し、デバイスがインターネットに接続されていることを確認します。 2. Little Black Box のバージョンを確認する Little Black Box ソフトウェアの最新バージョンを使用していることを確認し、Steam アカウントをバインドしてみてください。 3. Steam アカウントの設定を確認するには、Steam アカウントにログインし、プライバシー設定でサードパーティソフトウェアのバインド機能がオンになっているかどうかを確認してください。 4. 公式カスタマーサービスに問い合わせる上記の手順を実行しても問題が解決しない場合は、公式カスタマーサービスに問い合わせることをお勧めします。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック