4

JSfiddle jsfiddle

このイベント委任の概念を、各名前空間イベントで使用したいと思います。どうやら、よりも最適化されてい.big-ul liます。残念ながら、名前空間を使用している間、またはプレーン オブジェクトを使用して複数のイベント ハンドラーを同時にアタッチしようとしているときに、それを機能させるための適切な構文が見つかりませんか?

$(".big-ul").on({
  "click.namespace", "li": function(event){
    $(this).toggleClass("active");
  },
  "mouseenter.namespace" , "li": function(event){
    $(this).addClass("inside");
  },
  "mouseleave.namespace", "li": function(event){
    $(this).removeClass("inside");
  }
});

jquery のサイトからのイベント委任の例

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});
4

5 に答える 5

3

このようなものはどうですか？

$(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){
    var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace;

    if(eventMatch == "click.namespace"){
        $(this).toggleClass("active");
    }
    if(eventMatch == "mouseenter.namespace"){
        $(this).addClass("inside");
    }
    if(eventMatch == "mouseleave.namespace"){
        $(this).removeClass("inside");
    }
});

それはうまくいきませんか？

編集 したい場合は、複数のifステートメントをswitchステートメントに置き換えることもできます...おそらくパフォーマンスも向上します（心配している場合）。

$(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){

    var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace;

    switch(eventMatch){
        case "click.namespace":
            $(this).toggleClass("active");
        break;
        case "mouseenter.namespace":
            $(this).addClass("inside");
        break;
        case "mouseleave.namespace":
            $(this).removeClass("inside");
        break;
    }
});

EDIT2 が更新され、@ Nirazulの発言に基づいて jsfiddle が機能するようになりました。 Example on jsFiddle

于 2013-08-14T10:07:50.277 に答える
3

そのような複数の関数に複数のイベントを添付することはできません。あなたができることはeach、必要なすべての情報を含むオブジェクトで関数を使用することです。名前空間名 (笑) を別の変数に格納することもできます。

Example on jsFiddle

var $root = $(".big-ul");
var namespace = 'namespace';
var events = [
    {
        event: "click"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).toggleClass("active");
        }
    },
    {
        event: "mouseenter"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).addClass("inside");
        }
    },
    {
        event: "mouseleave"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).removeClass("inside");
        }
    }
]

for(i=0;i<events.length;i++){
    $root.on(events[i].event, events[i].delegate, events[i].fn);  
}

受け入れられたソリューションと比較した利点:

  1. 常に同じ-Object 構造eventsを使用する場合、モジュール間で -Object を送信したり、単一の関数でイベントを動的にバインドしたりできるため、はるかに柔軟なソリューションです。event
  2. 1 つのルート オブジェクトから、1 つだけでなく、さまざまな子ノードに委任できます。

例：

/* events array*/
var events = [
    {
        root: "root-query-string",
        event: "eventname",
        delegate: "delegate-query-string",
        fn: function
    }
]

/* dynamic batch bind function */
function batchBind(events) {
    for(i=0; i<events.length; i++){
        $(el.root).on(events[i].event, events[i].delegate, events[i].fn);  
    }
}
于 2013-08-14T10:03:15.433 に答える
2

与えられた答えは、セレクターeachを使用するよりも効率的ではありません。.big-ul li私の理論では、基本的な on() セレクターはセレクターに対して 1 回実行され、すぐにイベントを接続しますが、遅延 on() セレクターはイベントが発生するたびにセレクターを実行します (一致する要素を見つけるため)。

このようにしてシンプルに保つこともできます。

$(".big-ul li").on({
    "click.namespace": function (event) {
        $(this).toggleClass("active");
    },
        "mouseenter.namespace": function (event) {
        $(this).addClass("inside");
    },
        "mouseleave.namespace": function (event) {
        $(this).removeClass("inside");
    }
});

http://jsfiddle.net/AzQBR/1/

誰かがパフォーマンス統計を実行できる場合、遅延されていない on() 呼び出しと比較して、遅延された on() の速度について却下されてうれしいです。

于 2013-08-14T10:08:18.987 に答える
1

すべての回答 (元の回答を含む) をもう一度調べた後、遅延on()構文を使用して各イベントを個別に接続することをお勧めします。

var $bigul = $(".big-ul");
$bigul.on("click.namespace", "li", function (event) {
    $(this).toggleClass("active");
});
$bigul.on("mouseenter.namespace", "li", function (event) {
    $(this).addClass("inside");
});
$bigul.on("mouseleave.namespace", "li", function (event) {
    $(this).removeClass("inside");
});

他のすべてのソリューションは、コードを過度に複雑にします。これは、あなたが得ることができるのとほぼ同じです。

JSFiddle http://jsfiddle.net/AzQBR/2/

于 2013-08-14T15:30:21.107 に答える