jqueryイベント委任の使い方-jsチュートリアル-php.cn

jqueryイベント委任の使い方

不言

リリース： 2018-07-09 17:59:06

オリジナル

1836 人が閲覧しました

この記事では主にjqueryイベントデリゲーションの使い方を紹介します。これは、必要な友達に参考にしてもらいたいです

1. onメソッドを通じて。 ) では、イベントがバインドされている要素の祖先にイベントをバインドして、効果を実現します。

1. イベント委任とは何ですか?

イベントバブリングを通じて、子要素にバインドされたイベントを親要素 (または祖先要素) までバブリングさせて処理させます。

 91       //使用事件委托，只在table上绑定一次事件 
 92       //可以动态绑定事件 
 93       $('table').on('click','td',function(){ 
 94             //$(this).css('background','orange') 
 95             alert('click_td') 
 96       })

ログイン後にコピー

2. イベント委任の利点は何ですか?

動的要素にイベントを追加する

イベントは 1 回だけバインドされるため、非常に効率的です (バインドする必要がある同じタイプの多数の要素の場合、効率は非常に高くなります (2500td のテーブルなど)。イベントは各 td にバインドする必要があります)

 91       //使用事件委托，只在table上绑定一次事件 
 92       //可以动态绑定事件 
 93       $('table').on('click','td',function(){ 
 94             //$(this).css('background','orange') 
 95             alert('click_td') 
 96       })

ログイン後にコピー

3. イベントの委任リスニングオブジェクト (イベント委任のオブジェクト) は誰ですか?

イベントを実行する場合、たとえばイベントを多数の TD にバインドする場合、イベント委任のオブジェクトはその祖先、つまりテーブル

 91       //使用事件委托，只在table上绑定一次事件 
 92       //可以动态绑定事件 
 93       $('table').on('click','td',function(){ 
 94             //$(this).css('background','orange') 
 95             alert('click_td') 
 96       })

ログイン後にコピー

4 とコードによって追加された要素の違いは何ですか。要素は動的に追加されますか?

イベントをバインドできるように、コード生成要素にイベントを追加するコードは、コードが生成された後になければなりません

 73       //如果不是动态创建的，可以直接绑定事件 
 74       $('<p></p>').appendTo($('body')) 
 75       $('<p></p>').appendTo($('body')) 
 76       $('<p></p>').appendTo($('body')) 
 77       $('p').on('click',function(){ 
 78             $(this).css('background','orange') 
 79        })

ログイン後にコピー

5 イベント委任の使用シナリオは何ですか?

テーブル内に多数の td があり、各 td にイベントをバインドする方法を使用すると、非常に効率が悪く、エラーが発生しやすいため、イベント委任を使用すると特に便利です。ワンステップで完了します。

 91       //使用事件委托，只在table上绑定一次事件 
 92       //可以动态绑定事件 
 93       $('table').on('click','td',function(){ 
 94             //$(this).css('background','orange') 
 95             alert('click_td') 
 96       })

ログイン後にコピー

6. テーブルに行と列を動的に追加するにはどうすればよいですか?

htmlコード+appendメソッド

 87       $('#btn1').click(function(){ 
 88           $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') 
 89       })

ログイン後にコピー

2. jqueryイベント委任の使い方

1. 関連知識

イベント委任

イベントバブリングを通じて、子要素にバインドされたイベントを親要素にバブルアップさせます(または祖先要素) ) を処理する前に。

2. コード

<!DOCTYPE html>
<html>
<style>
</style>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        input{width: 100px;height: 30px;}
        div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
        td{width: 50px;height: 20px;background: #ccc}
      </style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div></div>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<script type="text/javascript">
    $(function(){
        /*
    //使用事件委托动态绑定事件
      $(&#39;#btn1&#39;).on(&#39;click&#39;,function(){
         $("<div></div>").appendTo($(&#39;body&#39;))
      })
      // $(&#39;div&#39;).on(&#39;click&#39;,function(){
      //     $(this).css(&#39;background&#39;,&#39;orange&#39;)
      // })
      $(document).on(&#39;click&#39;,&#39;div&#39;,function(){
          $(this).css(&#39;background&#39;,&#39;orange&#39;)
      })
      //移出事件委托
      $(document).off(&#39;click&#39;,&#39;div&#39;)
      
      //如果不是动态创建的，可以直接绑定事件
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;div&#39;).on(&#39;click&#39;,function(){
            $(this).css(&#39;background&#39;,&#39;orange&#39;)
       })
      
      //每一个td绑定一个事件
      //不能动态的添加事件,效率低
      $(&#39;td&#39;).on(&#39;click&#39;,function(){
          alert(&#39;click_td&#39;)
      })
      */ 
      $(&#39;#btn1&#39;).click(function(){
          $(&#39;<tr><td></td><td></td><td></td><td></td><td></td></tr>&#39;).appendTo(&#39;table&#39;)
      })

      //使用事件委托，只在table上绑定一次事件
      //可以动态绑定事件
      $(&#39;table&#39;).on(&#39;click&#39;,&#39;td&#39;,function(){
            //$(this).css(&#39;background&#39;,&#39;orange&#39;)
            alert(&#39;click_td&#39;)
      })

    })
</script>
</body>
</html>

ログイン後にコピー