jQueryイベントの使い方まとめexamples_jquery
この記事では、jQuery でのイベントの使用法を例とともに詳しくまとめており、jQuery を学習する際の参考になります。皆さんの参考に共有してください。具体的な使い方は以下の通りです:
1. メソッド名を使用してイベントを要素にバインドします:
$('li').click(function(event){})
2. バインド メソッドを使用してイベントを要素にバインドします:
$('li') .bind('click',function(event){}) .bind('click',function(event){})
bind を通じて、複数のイベントを要素にバインドできることがわかります。
3. イベント名前空間
イベント名前空間が必要なのはなぜですか?
→最初に 2 つのクリックイベントを li 要素にバインドするとします。
$('li') .bind('click',function(event){}) .bind('click',function(event){})
→次に、クリック イベントの 1 つをログアウトする必要があります。これは次のように記述できます:
$('li').unbind('click')
しかし、この方法では、li 内のすべてのクリック イベントがログアウトされます。これは私たちが望んでいることではありません。イベント名前空間を使用すると、この問題を解決できます。イベント名前空間が必要な理由は、イベントをログオフするときに便利だからです。
イベント名前空間を使用するには?
→イベントを要素にバインドする場合は、イベント名.名前空間名の形式に従って、イベント名の後に名前空間を追加します。
$('li') .bind('click.editMode',function(event){}) .bind('click.displayMode',function(event){})
→イベントからログアウトする場合は、次のように記述できます:
$('li').unbind('click.editMode')
4. イベントの種類
ぼかし
変更
をクリックしてください
dblclick
エラー
フォーカス
フォーカスイン
フォーカスアウト
キーダウン
キーを押す
キーアップ
ロード
マウスダウン
マウス入力
マウス離れる
マウス移動
マウスアウト
マウスオーバー
マウスアップ
準備完了
サイズ変更
スクロール
を選択してください
送信
アンロード
5.1 つのメソッド
1 回限りのイベントを作成するために使用されます。このイベントは一度実行されると自動的に削除されます。
$("p").one("click",function(){ $(this).animate({fontSize: "+=6px"}); })
6. イベントを削除します
//先给元素添加事件 $("p").click(function(){ $(this).slideToggle(); }) //再把元素的事件删除 $("button").click(function(){ $("p").unbind(); })
7.イベント属性
実際には、これは jQuery のグローバル プロパティである jQuery.Event です。イベントがトリガーされるたびに、Event オブジェクトのインスタンスがイベント ハンドラーに渡されます。
イベントは、Event コンストラクターを通じて作成およびトリガーできます。
var e = jQueery.Event("click") jQuery("body").trigger(e);
コンストラクターを介してイベント内の匿名オブジェクトを渡すこともできます。
var e = jQuery.Event("keydown", {keyCode : 64}); jQuery("body").trigger(e);
使用すると、event.data.KeyCode を通じて匿名オブジェクトの値を取得します。
jQuery.Event のコンストラクターを介して Event で匿名オブジェクトを渡すことができます。それだけでなく、イベントを通じて匿名オブジェクトを渡すこともできます。
$("p").click({param1 : "Hello", param2 : "World"}, someFunction); function someFunction(event){ alert(event.data.param1); alert(event.data.param2); }
匿名オブジェクトのキーは、event.data を通じて取得できることがわかります。
イベント オブジェクト インスタンスを通じて、次のような情報の他の側面も取得できます。
$("p").click(function(event){ alert(event.target.nodeName); })
上記では、event.target.nodeName を通じてイベントをトリガーした要素の名前を取得します。
jQuery.Event のその他のプロパティは次のとおりです:
altKey alt キーが押された場合は True、Mac キーボードでは、alt キーに Option
がマークされます。
ctrKey Ctrl キーが押されました
ShiftKey Shift キーが押されました
currentTarget バブリングステージの現在の要素
データ
メタキー 一般的にメタキーは Ctrl ですが、Mac では Command キー
です。
pageX マウス イベント中のページの原点を基準としたカーソルの水平座標
pageY マウスイベント
中のページの原点を基準としたカーソルの垂直座標
関連ターゲット マウス イベントがトリガーされたときにカーソルが出入りする要素
screenX マウス イベント
中の画面原点を基準としたカーソルの水平座標
screenY マウスイベント中の画面の原点を基準としたカーソルの垂直座標
結果は、前のイベント ハンドラーからの最新の未定義の値を返します
イベントをトリガーするターゲット要素
timestamp jQuery.Event インスタンスが作成されたときのタイムスタンプ (ミリ秒単位)
type イベントタイプ (click
など)
キーボード イベントの場合は、キーの番号を表します。マウス イベントの場合は、左ボタン、中ボタン、または右ボタンが押されたかどうかを記録します
8.イベントメソッド
event.preventDefault() はデフォルトの動作を防止します
event.stopPropgation() は「バブリング」を停止します。つまり、DOM のさらに上の伝播を停止します
events.stopImmediatePropagation() はすべてのイベントのさらなる伝播を停止します
イベント.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()
9.live メソッドと on メソッド
このメソッドを使用すると、まだ存在しない要素のイベントを作成できます。バインド メソッドとの違いは、一致するすべての要素にイベントをバインドできることと、設定はまだ存在せず、動的に作成する必要がある要素であることです。さらに、ライブ メソッドは、必ずしも $(function(){}) Ready ハンドラーに配置する必要はありません。 jQuery 1.7以降はonメソッドに変更されました。
$("p").on("click", function(){ alert("hello"); })
イベント登録をキャンセルしたい場合:
$("button").click(function(){ $("p").off("click"); })
10.トリガーメソッド
トリガー メソッドは、要素にバインドされたイベントを手動でトリガーする場合に使用できます。
$("#foo").on("click",function(){ alert($(this).text()); }) $("#foo").trigger("click");
还可以在绑定事件的时候出传入形参,在trigger事件的时候传入实参。
$("#foo").on("custom", function(event, param1, param2){ alert(param1 + "\n" + param2) }) $("#foo").trigger("custom",["Custom","Event"]);
trigger触发由jQuery.Event创建的实例:
var event = jQuery.Event("logged"); event.user = "foo"; event.pass = "bar"; $("body").trigger(event);
甚至可以在trigger触发方法的时候传入匿名对象:
$("body").trigger({ type: "logged", user: "foo", pass: "bar" });
如果想停止触发事件的传播,可通过jQuery.Event实例的stopPropgation()方法,或在任何事件中返回false。
11.triggerHandler方法
triggerHandler方法与trigger方法的不同之处在于:triggerHandler方法不会执行元素的默认事件,也不会"冒泡"。
//给一个元素绑定一个focus事件 $("input").focus(function(){ $("<span>Focused</span>").appendTo("#id").fadeOut(1000); }) //用triggerHandler触发 $("#id").click(function(){ $("input").triggerHandler("focus");//不会触发focus的默认行为,即进入文本框 }) //用trigger触发 $("#id").click(function(){ $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为 })
12.事件冒泡和事件委托
什么是事件冒泡?
有这么一段代码。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <p><a href="#foo"><span>I am a Link!</span></a></p> <p><a href="#bar"><b><i>I am another Link!</i></b></a></p> </div> </body> </html>
现在,给该页面所有的元素绑定click事件,包括window和document。
$(function () { $('*').add([document, window]).on('click', function(event) { event.preventDefault(); console.log(this); }); });
当单击页面任何元素,单击事件会从当前元素开始,向上一级元素传播,直到最顶级元素,这里是window。
如何阻止事件冒泡?
显然,通常只希望在某个特定元素发生特定的事件,不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。
$(function () { $('a').on('click', function(event) { event.preventDefault(); console.log($(this).attr('href')); }); });
以上,只为a绑定了click事件,无它。
如何有效利用事件冒泡?
在jquery中,事件委托却很好地利用了事件冒泡。
<html> <body> <div id="container"> <ul id="list"> <li><a href="http://domain1.com">Item #1</a></li> <li><a href="/local/path/1">Item #2</a></li> <li><a href="/local/path/2">Item #3</a></li> <li><a href="http://domain4.com">Item #4</a></li> </ul> </div> </body> </html>
现在,我们想给现有li中的a标签绑定事件,这样写:
$( "#list a" ).on( "click", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });
但是,如果又在现有的ul中添加新的li和a,那情况又如何呢?
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );
结果,点击新添加的li中的a,什么都没有发生。那么,如何为动态添加的元素绑定事件呢?
如果我们能把事件绑定到a的父级元素,那在父级元素内生成的子级动态元素,也会有绑定事件的行为。
$( "#list" ).on( "click", "a", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });
以上,我们把click事件绑定到a的父级元素id为list的ul上,on方法中的第二个参数,这里是a,是事件真正的执行者。具体过程如下:
→点击某个a标签
→根据事件冒泡,触发了a的父级元素ul的click事件
→而事件真正的执行者是a
事件委托允许我们把事件绑定到父级元素,这相当于给所有的子级元素绑定了事件,不管这个子级元素是静态的、还是动态添加的。
13.toggle方法
允许我们依次执行多个事件,当执行完最后一个事件后,再执行第一个事件。
$('img[src*=small]').toggle({ function(){}, function(){}, function(){} });
14.mouseenter和mouseleave方法
$(element).mouseenter(function(){}).mouseleave(function(){})
15.hover方法
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

ホット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)

ホットトピック











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

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

MySQL の ISNULL() 関数は、指定された式またはカラムが NULL かどうかを判断するために使用される関数です。ブール値、式が NULL の場合は 1、それ以外の場合は 0 を返します。 ISNULL()関数は、SELECT文やWHERE句の条件判定に使用できます。 1. ISNULL() 関数の基本構文: ISNULL(expression) ここで、expression は、NULL かどうかを判断する式です。

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

PHP での POST リクエストの使用は、Web サイト開発における一般的な操作であり、フォーム データ、ユーザー情報などのデータは、POST リクエストを通じてサーバーに送信できます。 POST リクエストを適切に使用すると、データのセキュリティと正確性を確保できます。以下では、PHP での POST リクエストの正しい使用法を紹介し、具体的なコード例を示します。 1. PHP における POST リクエストの基本原則 PHP では、POST メソッドを通じて送信されたデータは、$_POST グローバル変数を使用して取得できます。 POST メソッドはフォーム番号を次のように変換します。
