Jquery 이벤트 위임을 사용하는 방법-JS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-07-09 17:59:06

원래의

1838명이 탐색했습니다.

이 글은 주로 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       $('<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 코드+추가 메소드

 87       $('#btn1').click(function(){ 
 88           $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').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 중국어 홈페이지를 주목해 주세요!