Jquery의 이벤트 바인딩 요약

머리말

jquery는 프로젝트에서 dom 요소를 추가하고 삭제하는 데 자주 사용되므로 dom 요소의 바인딩 이벤트 방식을 사용하므로, 바인딩, 라이브, 위임, 켜기의 차이점을 간략하게 요약해 보겠습니다. 나중에 참고할 수 있도록 하고, 앞으로 이 글이 친구들에게 도움이 되기를 바랍니다. 혹시 잘못된 점이 있으면 지적하고 소통했으면 좋겠습니다.

One.bind()

간략한 설명

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

사용법

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

event: 요소에 추가된 하나 이상의 이벤트(예: click , dblclick) , etc.;

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

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

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

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

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

데이터: 선택 사항;

함수: 필수; 바인딩 이벤트가 발생하면 함수를 실행해야 합니다.

은 Jquery 버전에 적용됩니다.

은 모든 버전에 적용되지만 공식 홈페이지에 따르면 jquery 1.7 버전부터 바인딩() 함수는 on()으로 대체하는 것이 좋습니다.

2. Live()

간략한 설명

live()는 현재 또는 미래의 일치 요소에 하나 이상의 이벤트 핸들러를 추가합니다. >사용법

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

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

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

다중 이벤트 처리: 1. 공백을 사용하여 $(와 같이 여러 이벤트를 구분합니다. selector ).live("click dbclick mouseout",data,function);

2. 중괄호를 사용하여 $(selector).live({event1:function, event2:function, .. .})　

3. 바인딩은 상대적으로 엄격하며 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다. : 바인딩 설정이 더 유연하며 함수를 이벤트에 별도로 바인딩할 수 있습니다.

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

function: 필수;

해당 Jquery 버전

jquery1.9 이하에서는 이 메서드를 삭제했습니다. 대신에.

3.delegate()

간단한 설명

delegate()는 지정된 요소(선택한 요소의 하위 요소) 프로그램에 하나 이상의 이벤트 핸들러를 추가합니다. 이러한 이벤트가 발생할 때 실행할 기능을 지정합니다. Delegate() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.

사용법

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

childSelector: 필수, 이벤트 핸들러를 추가해야 하는 요소, 일반적으로 Child 선택기의 요소;

이벤트: 필수, click, dblclick 등의 이벤트가 하나 이상 추가됨

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

다중 이벤트 처리: 1. $(selector).delegate(childselector,"click dbclick mouseout",data, function);

2. 중괄호를 사용하여 $(selector).delegate(childselector,{event1:function, event2:function, ...})　

과 같은 여러 이벤트를 유연하게 정의합니다. 3. 공백 분리 방법: 바인딩은 상대적으로 엄격하며 함수를 이벤트에 별도로 바인딩할 수 없습니다.

중괄호 대체 방법: 바인딩이 더 유연하며 함수를 사용할 수 있습니다.

데이터: 선택 사항; 전달해야 하는 매개변수

기능: 바인딩 이벤트가 발생할 때 실행되어야 하는 함수; >적용 가능한 Jquery 버전

jquery1.4.2 이상;

IV.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 ;

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

childSelector: 선택 사항; 이벤트 핸들러를 추가해야 하는 요소(일반적으로 선택기의 하위 요소)

data: 선택 사항;

함수: 필수; 바인딩 이벤트 발생 시 실행해야 하는 함수

Jquery 버전에 적용

jquery1.7 버전 이후에는 바인딩을 대체하는 데 사용됩니다. (), live() 바인딩 이벤트 메서드

5. 네 가지 메서드의 유사점, 차이점, 장단점

동일점:

1. 단일 요소 및 다중 이벤트, 공백 방식 또는 중괄호 교체 방식으로 구분

2. 둘 다 이벤트 버블링을 통해 이벤트를 문서에 전달합니다.

🎜>

1. 바인딩() 함수는 기존 요소에 대해서만 이벤트를 설정할 수 있지만 live(), on() 및 Delegate()는 모두 향후에 새로 추가되는 요소에 대한 이벤트 설정을 지원합니다. >2.bind () 함수는 jquery 버전 1.7 이전에는 상대적으로 인기가 있었지만, 버전 1.7이 나온 이후에는 공식적으로 바인드()가 권장되지 않았는데, 이 역시 버전 1.7에서 새로 추가된 함수입니다. ,

버전 1.9에서 삭제된 live() 함수를 대체하는 데 사용됩니다

3. live() 함수는 Delegate() 함수와 유사합니다. live() 함수는 Delegate()에 비해 실행 속도가 빠릅니다.

4.bind()는 유연성 측면에서 모든 버전의 Jquery를 지원하고 CSS 선택기 지원은 jquery1.8-을 지원합니다. () jquery1.4.2+ 지원; on() jquery1.7+ 지원

7. 요약

프로젝트에서 참조하는 jquery 버전이 낮은 버전인 경우 사용을 권장합니다. 상위 버전의 jquery에서는 on()을 대신 사용할 수 있습니다. 위 내용은 제 개인적인 의견일 뿐이므로 자유롭게 공유해 주세요.