ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryを使用する理由
jquery では、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加する必要があるため、on() メソッドを使用する必要があります。このメソッドによって追加されたイベント ハンドラーは、現在およびfuture Elementの構文は「element object.on(event, 子要素のイベントハンドラ, 追加データ, function)」です。
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
on() メソッドを使用して、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加する理由。
jQuery バージョン 1.7 以降、on() メソッドは、bind()、live()、および delegate() メソッドに代わる新しいメソッドです。このメソッドは API に多くの利便性をもたらし、jQuery コード ベースを簡素化するため推奨されます。
注: on() メソッドを使用して追加されたイベント ハンドラーは、現在および将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。
ヒント: イベント ハンドラーを削除する必要がある場合は、off() メソッドを使用します。
ヒント: 1 回だけ実行するイベントを追加して削除する必要がある場合は、one() メソッドを使用します。
構文
$(selector).on(event,childSelector,data,function)
event 必須。選択した要素から追加する 1 つ以上のイベントまたは名前空間を指定します。スペースで区切られた複数のイベント値を配列にすることもできます。有効なイベントである必要があります。
childSelector オプション。イベント ハンドラーを指定した子要素にのみ追加できるように指定します (非推奨の delegate() メソッドなどのセレクター自体には追加できません)。
データ オプション。関数に渡す追加データを指定します。
関数 オプション。イベントの発生時に実行する関数を指定します。
例は次のとおりです。
<html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").on("click",function(){ alert("段落被点击了。"); }); }); </script> </head> <body> <p>点击这个段落。</p> </body> </html>
出力結果:
After段落をクリックします:
推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル
以上がjQueryを使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。