4

時々私はonイベントを委任するために使用します、

dom.addEventListener("click",function(e){
  e.target for hander.
}
instead:
dom.on("click",'a'，function(){
  $(this).handler..
}

だから、私はこの方法でコードを書くことができると思います:

function delegate(dom,event,selector,handler){
   target = event.target;
   while selector.dom.not_match event.target
       target = target.parentNode
       recheck until match the selector and do handler;
   end
}

私は前にこれを書いた：

function delegate(dom,event,selector,handler){
    dom.addEvent event function(){
      target_arr = dom.find(selector);
      if(event.target in_array target_arr){
        do handler
      }else{
         target = target.parentNode until dom.
         recheck in target_arr;
      }
    }

}

'delegate' または 'on' での jquery の作業方法を誰かが知っていますか?'delegate' の簡単な説明をコードで示してください。

4

5 に答える 5

3

のjQueryドキュメントをon()見てください。概念が非常によく説明されています。

また、ソースコードを見ることができます！

学んだ教訓：

  • delegateonパラメータの順序が異なる単なるラッパーです
  • on一部のパラメータの正規化とハンドルのみを行いますがone、その後に委任しますjQuery.event.add( this, types, fn, data, selector );
  • event.add多くの検証を行い、複数の型と特殊なケースを処理し、引数をプッシュし$.data("events")て呼び出しますelem.addEventListener(type, jQuery.event.dispatch, false)
  • event.dispatch次に、ハンドルを再度クエリし、ネイティブ イベントから$.data("events")を構築します。jqEvent次に、委任されたイベントの検索を開始します (そのコードは非常に簡単です)。それらを にプッシュしhandlerQueue、その後、要素に直接アタッチされている通常のハンドラにプッシュします。最後に、委譲されたハンドラーから始めて、 を実行するだけです。handlerQueue
于 2012-12-21T06:56:42.957 に答える
2

あなたがするとき：

$(selector1).on(event, selector2, function);

jQuery は、一致する DOM 要素のイベントにハンドラーをバインドしますselector1。このハンドラーが実行されると、最も具体的な要素から一致する要素まで DOM 階層をたどり、selector1いずれかの要素が一致するかどうかをチェックしますselector2。一致が見つかった場合はfunction、適切な実行コンテキストで呼び出します。

これによりon()、委譲の作成後に動的に追加される DOM 要素のイベントを で処理できるようになります。

于 2012-12-21T06:59:50.260 に答える
1

jQuery 1.4.2 の起動により、 と呼ばれる新しいメソッドdelegate()が導入されました。このメソッドは、選択/指定された要素の 1 つ以上のイベントにハンドラーをアタッチします。例を見てみましょう。テーブルを作成し、デリゲート メソッドを使用して、すべての td 要素にクリック イベント ハンドラーをアタッチします。

<table border="1" width="200px" cellspacing="5" cellpadding="5">
   <tr>
       <td>Item 1</td>
       <td>Item 2</td>
   </tr>
   <tr>
       <td>Item 3</td>
       <td>Item 4</td>
   </tr>
</table>

jQuerydelegate()メソッド コード。

$(document).ready(function(){
  $("table").delegate("td","click",function(){
         alert('I am' + $(this).text());
  });
});

3 つの引数を取ります。

  1. セレクタ
  2. イベントタイプ
  3. イベントハンドラ

この方法では、これが非常に可能であると言うでしょうbind()。以下のコードは目的を果たします。

$(document).ready(function(){         
  $("table td").bind("click",function(){
      alert('I am' + $(this).text());
  });
});

delegate()では、メソッドの何が新しいのでしょうか?

bind() メソッドは、呼び出されたときにページ上にあった要素にイベントを追加します。たとえば、bind() が呼び出されたとき、ページには 4 つの td しかありません。後でテーブルに td を動的に追加すると、bind() はそれらの td にクリック イベント ハンドラーをアタッチしません。デモを拡張して、td を動的に追加するボタンをページに配置しましょう。

<input type="button" value="Add TD" id="btnAdd" />

$("#btnAdd").click(function(){
   $("table").append("<tr><td>Item 5</td><td>Item 6</td></tr>");
});

このページを実行すると、新しく追加された td のクリック イベントが見つかりません。

しかし、delegate()では、新しく追加された td のクリック イベントが見つかります。delegate() メソッドは、ページ上にあるイベントを追加し、新しい要素をリッスンしてそれらにイベントを追加します。:)

于 2012-12-21T06:36:50.623 に答える
0

別の段落を追加するには、段落をクリックします。.delegate() はすべての段落 (新しい段落も含む) にクリック イベント ハンドラーをアタッチすることに注意してください。

            <!DOCTYPE html>
            <html>
            <head>
              <style>
              p { background:yellow; font-weight:bold; cursor:pointer; 
                  padding:5px; }
              p.over { background: #ccc; }
              span { color:red; }
              </style>
              <script src="http://code.jquery.com/jquery-latest.js"></script>
            </head>
            <body>
              <p>Click me!</p>

              <span></span>
            <script>
                $("body").delegate("p", "click", function(){
                  $(this).after("<p>Another paragraph!</p>");
                });
            </script>

            </body>
            </html>

もう一つの例

              <!DOCTYPE html>
            <html>
            <head>
              <style>
              p { color:red; }
              span { color:blue; }
              </style>
              <script src="http://code.jquery.com/jquery-latest.js"></script>
            </head>
            <body>
              <p>Has an attached custom event.</p>
              <button>Trigger custom event</button>
              <span style="display:none;"></span>
            <script>

                $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
                  $(this).text("Hi there!");
                  $("span").stop().css("opacity", 1)
                           .text("myName = " + myName)
                           .fadeIn(30).fadeOut(1000);
                });
                $("button").click(function () {
                  $("p").trigger("myCustomEvent");
                });

            </script>

            </body>
            </html>

追加されたバージョンのメソッドの動作: 1.4.2

.delegate(セレクター、イベントタイプ、ハンドラー(イベントオブジェクト))

セレクター - イベントをトリガーする要素をフィルタリングするセレクター。

eventType - 「クリック」や「キーダウン」などのスペースで区切られた 1 つ以上の JavaScript イベント タイプ、またはカスタム イベント名を含む文字列。

handler(eventObject) - イベントがトリガーされたときに実行する関数。

追加されたバージョン: 1.4.2

デリゲート(セレクター、イベントタイプ、イベントデータ、ハンドラー(イベントオブジェクト))

セレクター - イベントをトリガーする要素をフィルタリングするセレクター。

eventType - 「クリック」や「キーダウン」などのスペースで区切られた 1 つ以上の JavaScript イベント タイプ、またはカスタム イベント名を含む文字列。eventData イベント ハンドラーに渡されるデータのマップ。

handler(eventObject) - イベントがトリガーされたときに実行する関数。

追加されたバージョン: 1.4.3

デリゲート（セレクター、イベント）

セレクター - イベントをトリガーする要素をフィルタリングするセレクター。

events - 1 つ以上のイベント タイプとそれらに対して実行する関数のマップ。

于 2012-12-21T06:32:47.237 に答える
-3 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph inside a div element.</p>
</div>
<p>This is a paragraph.</p>

</body>
</html>
于 2012-12-21T06:24:49.590 に答える