jQuery_jqueryでのon()メソッドの使用例

この記事の例では、jQuery での on() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、1 つ以上のイベント ハンドラーを一致する要素にバインドできます。
on() メソッドでバインドされたイベントを削除するには、off() メソッドを使用します。

文法構造 1:

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

$(selector).on(events,[selector] ,[データ],fn)

パラメータリスト:

パラメータ	説明
イベント	スペースで区切られた 1 つ以上のイベント タイプとオプションの名前空間。
セレクター	オプション。ハンドラーを呼び出す子孫要素を持つ選択された要素をフィルターするセレクター文字列。 選択範囲が空であるか無視された場合、イベントは選択された要素に到達すると常に発生します。
データ	オプション。イベント ハンドラー関数による処理のために、event.data プロパティの値としてイベント オブジェクトに渡される追加のデータ オブジェクト。
fn	このイベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

コード例:

例 1:

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

<頭>





<スクリプトタイプ="text/javascript"> $(document).ready(function(){
$("div").on("クリック",function(){
$(this).text("スクリプト ハウスへようこそ"); })
})

オリジナルコンテンツ

上記のコードは、クリック イベントを div にバインドします。div がクリックされると、新しいテキスト コンテンツを div に設定できます。

例 2:

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

<頭>





<スクリプトタイプ="text/javascript"> $(document).ready(function(){
$("div").on("クリックマウス移動",function(){
$(this).text("スクリプト ハウスへようこそ"); })
})

オリジナルコンテンツ

上記のコードは、2 つのイベントを div にバインドします。div をクリックするか、div 内でマウスを移動すると、新しいテキスト コンテンツが div に設定されます。

例 3:

コードをコピーします

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

<頭>

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
  var newtext="这是新文本"
  $(".parent").on("click",".children",{"mytext":newtext},function(e){
    $(this).text(e.data.mytext);
  })
})

 

原来コンテンツ

大家好

上のコードでは、子要素とその子要素のうちの、対応付け可能なイベントがフィルタリングされます。
语法结构二:

复制代代码如下:

$(selector).on(object,[selector],[data] ])

パラメータリスト:

参数	描述
object	一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

コード例:

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

<頭>