首頁 > web前端 > js教程 > jquery事件委託如何使用

jquery事件委託如何使用

不言
發布: 2018-07-09 17:59:06
原創
1810 人瀏覽過

這篇文章主要介紹了關於jquery事件委託如何使用,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

一、總結

一句話總結:透過on方法(事件委託),給要綁定事件的元素的祖先綁定事件,從而達到效果。

1、事件委託是什麼?

透過事件冒泡,讓子元素綁定的事件冒泡到父元素(或祖先元素)上,然後再處理。

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

2、事件委託的優勢是什麼?

為動態元素新增事件
事件只綁定一次,效率高(對於同類大量元素需要綁定,效率非常高,例如一個表格2500td,要給每個td綁定事件)

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

3、事件委託的監聽對像是誰(事件委託的對像是誰)?

要執行事件他祖先,例如要給大量td綁定事件,事件委託的物件就是它爺爺,也就是table表

 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綁定事件,如果使用給每個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       })
登入後複製

二、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>
登入後複製

為動態元素新增事件
事件只綁定一次,效率高

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

js將任意元素移到指定位置

Node.js使用superagent模擬GET/POST的請求

以上是jquery事件委託如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板