jquery - .on（）メソッドのevent-mapでセレクターを使用するための構文？

Question

events-mapを使用して.on（）メソッドを作成しようとしています。これを変更したい：$("ul").on("click", "li", function() {...});次のようなものに：

$("ul").on({
    click: function() {...},
    mouseenter: function() {...},
    mouseleave: function() {...}
});

イベントマップのどこにセレクター「li」を配置しますか？

Answer 1

あなたはいつものようにそれを2番目の引数として置くだけです：

$("ul").on (
  {
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
  },
  'li'
);

ドキュメントから：

.on（events-map [、selector] [、data]）

events-map文字列キーが1つ以上のスペースで区切られたイベントタイプとオプションの名前空間を表し、値がイベントに対して呼び出されるハンドラー関数を表すマップ。

セレクターハンドラーを呼び出す選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターがnullまたは省略されている場合、ハンドラーは、選択された要素に到達したときに常に呼び出されます。

dataイベントが発生したときにevent.dataのハンドラーに渡されるデータ。

[]で囲まれたパラメーターはオプションです。したがって、セレクターを渡さない場合、イベントはjQueryオブジェクトの要素、この場合はページ上のすべての要素にバインドされulます。ただし、セレクターが提供されている場合、jQueryオブジェクトの要素は、セレクターによって一致する要素のセットのイベント委任を処理します。つまり、jQueryオブジェクトの要素の子孫であるセレクターに一致する要素でイベントが発生すると、イベントが親に到達すると、そのイベントハンドラーが呼び出されます。これは、イベントの伝播が親に到達する前にキャンセルされた場合、イベントハンドラーが呼び出されないことを意味することに注意してください。

Answer 2

イベントマップの後：

$("ul").on ({
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
}, "li");

例： http： //jsfiddle.net/pPPW4/

ドキュメントによると：

.on（events-map [、selector] [、data]）

Answer 3

イベントマップの後：

$("ul").on ({
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
}, 'li');

ドキュメントから：

.on（events-map [、selector] [、data]）