Jquery의 바인딩(), live(), Delegate(), on() 이벤트 바인딩 메서드에 대한 간략한 설명

머리말

프로젝트에서는 dom 요소를 추가하거나 삭제하기 위해 jquery를 사용하는 경우가 많기 때문에 나중에 참조할 수 있도록 바인딩, 라이브, 위임의 차이점을 간략하게 요약하겠습니다. 앞으로는 정원 친구들을 도와주세요. 기사에 부적절한 내용이 있으면 바로잡아 주시기 바랍니다.

bind()

간략한 설명

bind()일치하는 요소에 하나 이상의이벤트 핸들러를 추가합니다.

사용 방법

$(selector).bind(event,data,function)

　이벤트：필수 항목, click, dblclick 등과 같은 요소에 추가된 하나 이상의 이벤트

　　　　　　 단일 이벤트 처리: 예:$("click",data , 기능);

이벤트는 함수에 개별적으로 바인딩되므로 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다. ;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　에 만들 수 있습니다: 바인딩이 더 유연하고 함수를 이벤트에 별도로 바인딩할 수 있습니다. 　　Data:선택 사항; 매개변수를 전달해야 합니다.

　 기능:필수; 바인딩 이벤트가 발생할 때 실행되어야 하는 함수

예

1  2  3  4 19 20 53 
54 55 56 
57 
58 59 

적용 Jquery 버전

에 적용되지만, 공식 홈페이지, jbind() 함수이후 권장 query1.7 버전 대신 on()을 사용하세요.
live()

live()현재 또는 미래의 일치 요소하나 이상의 이벤트 핸들러를 추가하세요.

Usage

　 $(selector). (이벤트,데이터,function)

필수; click, dblclick 등과 같은 하나 이상의 이벤트가 요소에 추가됨　　　S 단일 이벤트 처리: 예,

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

$(선택기).live("click dbclick mouseout",data,function);

　　　　　　2. 컬리를 사용하세요 대괄호$(selector).live({event1:function, event2:function, ...})　과 같은 여러 이벤트를 유연하게 정의합니다. ㅋㅋㅋ　　　　　　　 고정된 괄호에 삽입: 더 엄격하고, 함수를 이벤트에 별도로 바인딩할 수 없으며, 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다.

데이터:

선택 사항; 전달해야 하는 매개변수

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

1  2  3  4 19 20 54 
55 56 57 
58 
59 60 

View Code

适用Jquery版本

　　jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。

delegate()

简要描述

delegate()为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式　

　　$(selector).delegate(childSelector,event,data,function)

childSelector:必需项；需要添加事件处理程序的元素，一般为selector的子元素；

event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　单事件处理：例如$(selector).delegate(childselector,"click",data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如$(selector).delegate(childselector,"clickdbclick mouseout",data,function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如$(selector).delegate(childselector,{event1:function, event2:function, ...})　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

1  2  3  4 19 20 51 
52 53 
54 55 56 
57 
58 
59 60 

View Code

适用Jquery版本

ry1.4.2#이상on()간단한 설명on()지정된 요소에 대해 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. on() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.사용방법

이벤트:필수 ; click, dblclick 등과 같은 하나 이상의 이벤트가 추가되었습니다.

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

　　　 다중 이벤트 처리: 1.

$(selector).와 같이 여러 이벤트를 구분하려면 공백을 사용하세요.on(" 클릭 m dbclick 마우스 아웃 ", childseletor, data, function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如$(selector).on({event1:function, event2:function, ...},childselector);　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

childSelector:可选；需要添加事件处理程序的元素，一般为selector的子元素；

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

1  2  3  4 19 20 53 
54 55 
56 57 
58 
59 
60 61 

View Code

适用Jquery版本

이상; ry1 .7 버전이 나온 후에는이 바인드()를 대체하는 데 사용됩니다. 및 live() 바인딩 이벤트 방법네 가지의 유사점, 차이점, 장점 및 단점 방법같은 점:

　1. 둘 다 단일 요소 및 다중 이벤트 바인딩을 지원합니다.2. 모든 이벤트는 이벤트 버블링을 통해 이벤트 응답을 위해 문서로 전달됩니다.

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:

1  2  3  4 19 20 51 
52 53 54 
55 
56 57 

View Code

2.bind() 함수는 jquery1.7 이전과 비교됩니다. 버전 1.7 출시 이후 공식에서는 더 이상 바인딩() 사용을 권장하지 않습니다. 또한 버전 1.7에 새로 추가된 기능인 on()도 사용할 수 있습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ버전 1.9에서 삭제된 live() 함수를 대체하는 데 사용됩니다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

3. live() 함수는 Delegate() 함수와 유사하지만 실행 속도, 유연성 및CSS 측면에서 live() 함수가 Delegate()보다 나쁩니다. selector지원에 대한 구체적인 상황을 알고 싶습니다. 여기를 클릭하세요.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

　http://kb.cnblogs.com/page/94469 /ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ바인드() 모든 버전의 Jquery를 지원합니다. live()는 jquery1.4.2+를 지원합니다. on()은 jquery1.7+를 지원합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ) 더 높은 버전의 jquery의 경우 , 대신 on()을 사용할 수 있습니다. 위 내용은 제 개인적인 의견일 뿐입니다. 다른 아이디어가 있으면 자유롭게 공유해 주세요.

위 내용은 Jquery의 바인딩(), live(), Delegate(), on() 이벤트 바인딩 메서드에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!