집 >웹 프론트엔드 >JS 튜토리얼 >Jquery 이벤트 위임을 사용하는 방법

Jquery 이벤트 위임을 사용하는 방법

不言원래의: 2018-07-09 17:59:061833검색

이 글은 주로 jquery 이벤트 위임을 사용하는 방법을 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

1. 요약

한 문장으로 요약: 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       $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 
 75       $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 
 76       $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').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 코드+추가 메소드

 87       $('#btn1').click(function(){ 
 88           $('a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5').appendTo('table') 
 89       })

2. jquery 이벤트 위임 사용 방법

1. 관련 지식

이벤트 위임

은 이벤트 버블링을 사용하여 하위 요소에 바인딩된 이벤트가 상위 요소(또는 상위 요소)에 버블링된 다음 처리되도록 허용합니다.

2, code

<!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 중국어 홈페이지를 주목해 주세요!