Jquery의 바인딩 이벤트 메소드 요약(bind() 및 on())-JS 튜토리얼-php.cn

Jquery의 바인딩 이벤트 메소드 요약(bind() 및 on())

高洛峰

풀어 주다： 2016-12-08 16:46:23

원래의

1048명이 탐색했습니다.

一.bind()

사용법: $(selector).bind(event,data,function)

event: 요소에 하나 이상의 이벤트가 추가되었습니다. click, dblclick 등

단일 이벤트 처리: $(selector).bind("click",data,function);

다중 이벤트 처리: 1. 공백을 사용하여 여러 이벤트 분리 $(selector).bind("click dbclick mouseout",data,function);

과 같은 이벤트 2. 중괄호를 사용하여 $(selector).bind(와 같은 여러 이벤트를 유연하게 정의합니다. {event1:function, event2:function, ...})　

3. 공간 분리 방법: 바인딩은 비교적 엄격하며 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다.

중괄호 대안: 바인딩이 더 유연하며 함수를 이벤트에 별도로 바인딩할 수 있습니다.

data: 선택 사항; 전달해야 하는 매개변수: 필수; 바인딩 이벤트가 발생하면 실행해야 하는 기능

예:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中bind()绑定事件方式</title>
  <style type="text/css">
    .container
    {
      width: 300px;
      height: 300px;
      border: 1px #ccc solid;
      background-color: Green;
    }
    .btn-test
    {
      border: 1px #ccc solid;
      padding: 5px 15px;
      cursor: pointer;
    }
  </style>
  <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
 
      /*********添加单个事件处理*********/
 
      $(".btn-test").bind("click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      /********添加多个事件处理********/
 
      //空格相隔方式
      $(".btn-test").bind("mouseout click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      //大括号替代方式
      $(".btn-test").bind({
        "mouseout": function () {
          alert("这是mouseout事件!");
        },
        "click": function () {
          $(".container").slideToggle();
        }
      });
 
      /********删除事件处理********/
      $(".btn-test").unbind("click");
 
    });
  </script>
</head>
<body>
  <input type="button" value="按钮" class="btn-test" />
  <div class="container">
  </div>
</body>
</html>

로그인 후 복사

은 모든 버전에 적용 가능하지만 jquery1.7 버전부터 공식 홈페이지에 접속하기 바인드() 함수 대신 on()을 사용하는 것을 권장합니다.

2.ON():

간단한 설명

on()은 지정된 요소에 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 함수를 실행하도록 지정합니다. on() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트에 의해 생성된 새 요소)에서 작동합니다.

사용

$(selector).on(event,childselector,data,function)

이벤트: 요소에 하나 이상의 이벤트가 추가되었습니다. 예를 들면 다음과 같습니다. click, dblclick 등

단일 이벤트 처리: $(selector).on("click",childselector,data,function);

다중 이벤트 처리:

1. $(selector).on("click dbclick mouseout",childseletor,data,function);

과 같이 여러 이벤트를 구분하려면 공백을 사용하세요. 2. 여러 이벤트를 유연하게 정의하려면 중괄호를 사용하세요. $(selector ).on({event1:function, event2:function, ...},childselector);

3. 공간 분리 방법: 바인딩은 상대적으로 엄격하며 함수를 이벤트에 개별적으로 바인딩할 수 없습니다. 여러 이벤트를 처리하는 데 적합합니다.

중괄호 대안: 바인딩이 더 유연하며 이벤트에 함수를 별도로 바인딩할 수 있습니다.

childSelector: 선택적; 이벤트 핸들러 추가, 일반적으로 선택기의 하위 요소입니다.

기능: 필수, 바인딩 이벤트가 발생하는 경우;

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>jquery中on()绑定事件方式</title>
   <style type="text/css">
     .container
     {
       width: 300px;
       height: 300px;
       border: 1px #ccc solid;
       background-color: Green;
     }
     .btn-test
     {
       border: 1px #ccc solid;
       padding: 5px 15px;
       cursor: pointer;
     }
   </style>
   <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(function () {
  
       /*********添加单个事件处理*********/
  
       $(".header").on("click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
  
       /********添加多个事件处理********/
  
       //空格相隔方式
       $(".header").on("mouseout click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
  
       //大括号替代方式
       $(".header").on({
         "mouseout": function () {
           alert("这是mouseout事件!");
         },
         "click": function () {
           $(".container").slideToggle();
         }
       }, ".btn-test");
  
       //删除事件
       $(".header").off("click", ".btn-test");
  
     });
   </script>
 </head>
 <body>
   <div class="header">
     <input type="button" value="按钮" class="btn-test" />
   </div>
   <div class="container">
   </div>
 </body>
 </html>

로그인 후 복사

Jquery 버전

jquery1.7 이상부터 적용됩니다. 바인드(), 라이브() 바인딩 이벤트 방법;

같은 점:

1. 둘 다 단일 요소와 다중 이벤트 바인딩을 지원합니다. 🎜>

2. 둘 다 전달됩니다. 이벤트 버블링 방법은 이벤트 응답을 위해 이벤트를 문서에 전달합니다.

비교 및 연결:

1. 기존 요소에 대한 이벤트. 그러나 live(), on() 및 Delegate()는 모두 향후 새로 추가되는 요소에 대한 이벤트 설정을 지원합니다.

는 다음과 같습니다.

2 jquery1.7 버전 이전의 .bind() 함수 버전 1.7 출시 이후 공식에서는 더 이상 바인드() 사용을 권장하지 않습니다. 이 함수도 버전 1.7에 새로 추가된 함수입니다. 마찬가지로

을 사용하여 live() 함수를 버전 1.9에서 삭제했습니다.

3. () 기능이 있지만 실행 속도, 유연성 및 CSS 선택기 지원 측면에서 live() 기능이 위임보다 우수합니다. 구체적인 상황을 알고 싶다면 여기를 클릭하세요:

4.bind()는 모든 버전의 Jquery를 지원합니다. live()는 jquery1.4.2+를 지원합니다. on()은 jquery1.7+를 지원합니다. 해당 프로젝트는 낮은 버전이므로 Delegate()를 사용하는 것이 좋습니다. 상위 버전의 jquery에서는 대신 on()을 사용할 수 있습니다. 위 내용은 제 개인적인 의견일 뿐입니다.