この記事の例では、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="/static/imghwm/default1.png" data-src="11.jpg" class="lazy" alt="jQueryバインディングイベントリスナーbindとイベントリスナー削除unbind_jqueryの使用例を詳しく解説" > <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 のすべてのイベントを削除します
例 2: p
のクリックイベントを削除する
例 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 プログラミングのすべての人に役立つことを願っています。
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 中国語版
中国語版、とても使いやすい
ホットトピック
7349
15162714135352126525121429