>웹 프론트엔드 >프런트엔드 Q&A >Jquery 이벤트 위임 방법이란 무엇입니까?

Jquery 이벤트 위임 방법이란 무엇입니까?

青灯夜游
青灯夜游원래의
2022-03-10 16:59:575431검색

jquery 이벤트 위임 방법에는 다음이 포함됩니다. 1. 주로 선택한 요소에 이벤트를 바인딩하는 데 사용되는 blind() 메서드 2. live() 메서드, 현재 또는 미래의 일치 요소에 하나 이상의 이벤트 핸들러 추가 3. 위임() 메서드 4. on() 메서드는 수신 이벤트를 가장 가까운 상위 요소에 바인딩하는 데 사용됩니다.

Jquery 이벤트 위임 방법이란 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

이벤트 위임이란 무엇인가요?

하위 요소의 이벤트는 이벤트 자체를 바인딩하기 위해 하위 요소에 할당하는 대신 상위 요소에 위임된 다음 이벤트가 트리거될 때 해당 event.target을 찾는 것을 의미합니다. 이벤트 버블링 및 하나의 이벤트 핸들러만 지정 특정 유형의 모든 이벤트를 관리하는 프로그램

이벤트 위임을 사용하는 이유는 무엇입니까? js에서 페이지에 추가되는 이벤트 핸들러의 개수는 페이지의 전반적인 실행 성능에 영향을 미치기 때문입니다.

둘째, 이벤트 핸들러를 하나씩 목록에 추가하는 것은 너무 번거롭기 때문에 이벤트 위임이 크게 향상됩니다. 성능

for 루프를 통해 ul 아래의 이벤트를 트래버스합니다. 문제가 없는 것처럼 보이지만 실제로는 페이지의 실행 성능에 영향을 줍니다.

이때 이벤트 위임이 버블링됩니다.

그러나 ul에 바인딩된 이벤트를 생각하면 구현 후 모든 li가 영향을 받지 않을까요?

새로운 개념 도입: 이벤트 소스: 이벤트가 바인딩된 요소에 관계없이 실제로 이벤트를 트리거하는 내부 대상을 나타냅니다.

event.target

예:ul.onclick=function(event){ }

간단한 것은 DOM 액세스를 줄이고, 메모리를 줄이고, 페이지의 실행 성능을 향상시키는 것입니다

jquery 이벤트 위임 방법은 무엇입니까

1. Blind

정의 및 사용법: 주로 이벤트 바인딩을 위한 요소 선택에 사용됨

구문:

blind("事件类型",data,function(){ });
//data是传入函数的参数用event.data获取(平时用的.click()等都是其简化用法)

Features; 정적 페이지에 적합하며 호출 시 이미 존재하는 요소에만 바인딩될 수 있으며 나중에 추가되는 요소에는 바인딩될 수 없습니다.

페이지가 로드되었습니다.

2, 라이브(1.7 이후에는 지원되지 않음)

정의: 현재 또는 미래의 일치 요소에 하나 이상의 이벤트 핸들러를 추가합니다.

구문: ​​

live("事件类型",data, 函数名);//data可选

기능: 라이브는 지원되지 않습니다. add events 자신(this)에 바인딩하지만 this.context

이벤트 위임 메커니즘을 사용하여 이벤트 모니터링 및 처리를 완료하고 노드 처리를 문서에 위임하는 것입니다

새로 추가된 요소는 필요하지 않습니다. 더 이상 바인딩됨 리스너는 여러 이벤트를 처리할 수 있습니다

직접 선택한 요소 뒤에만 배치할 수 있습니다

3. Delegate

정의: 이벤트가 더 빨리 버블링될 수 있으므로 청취 이벤트를 가장 가까운 상위 요소에 바인딩합니다. up

구문: ​​

delegate(selector,type,[data],fn)

특징: 작은 범위에서 이벤트 프록시를 더 정확하게 사용하며 성능은 .live()보다 낫습니다. 동적으로 추가된 요소에 사용할 수 있습니다.

("父级选择器").delegate(".a","click",function())//表示:.a的事件通过父级元素进行委托,(this)获取的是触发事件的子元素

4, on

정의; 청취 이벤트를 가장 가까운 상위 요소에 바인딩

구문: ​​

on(type, 选择器,方法)

기능: 청취 이벤트는 상위 요소 아래에 새로 추가된 태그에도 사용할 수 있습니다

또한 다중 요소를 지원합니다. 시간 이벤트 처리

【추천 학습:

jQuery 동영상 튜토리얼

, 웹 프런트엔드 동영상

위 내용은 Jquery 이벤트 위임 방법이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.