찾다
웹 프론트엔드프런트엔드 Q&AJquery 이벤트 위임 방법이란 무엇입니까?

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

Mar 10, 2022 pm 04:59 PM
jquery이벤트 위임

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으로 문의하세요.
CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?May 14, 2025 am 12:20 AM

아니요, 당신은 uplemultipleidsinthesamedom.1) idsmustbeuniqueperhtmlspecification, andusingduplicatescancauseSconsistentBrowserBehavior.2) useclassesforstylingmultipleelements, attributesectorscendats eftibutes 및 descenderfortrecture

HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities, MakingItmoredynamic, Interactive, and Accessible.1) itsupportsmultimediaelementslikeand, 2) SemanticlementsImpreveAcessibilityandCodeReardability.3) 특징적인 부대, 응답 Whebappl

HTML5의 중요한 목표 : 웹 개발 및 사용자 경험 향상HTML5의 중요한 목표 : 웹 개발 및 사용자 경험 향상May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentandusereerexperiencetroughsemanticstructure, multimediaintegration 및 performanceimprovements

html5 : 안전합니까?html5 : 안전합니까?May 14, 2025 am 12:15 AM

html5isnotinherentlyinsecure, buttsfeaturescanleadtosecurityRiskSifMisusedOrimProperSimplemented.1) USETHETSANDTRIFICEINIFRAMESTOCONTROLEMEDEDEDENDENDENDENDENDENDENDENDENDENTANDENTANDERVULNERABILITIESLIKECLIKEJACKINGINITIONSLIKECLIKETHOING.2) 피난처에 대한 비난을 피하십시오

이전 HTML 버전과 비교할 때 HTML5 목표이전 HTML 버전과 비교할 때 HTML5 목표May 14, 2025 am 12:14 AM

html5aimedtoenhanceWebDevelopmentByIntrictionmanticalLiticalEmentements, nativeMultiMediasupport, 개선 된 정보 및 및 플린 컨테이션, html4andxhtml.1) itintructed -temantictagsiver ,, 개선 부양

CSS : ID 선택기를 사용하는 것이 좋지 않습니까?CSS : ID 선택기를 사용하는 것이 좋지 않습니까?May 13, 2025 am 12:14 AM

ID 선택기를 사용하는 것은 본질적으로 CSS에서 나쁘지 않지만주의해서 사용해야합니다. 1) ID 선택기는 고유 한 요소 또는 JavaScript 후크에 적합합니다. 2) 일반적인 스타일의 경우 클래스 선택기가보다 유연하고 유지 관리 가능하므로 사용해야합니다. ID 및 클래스 사용의 균형을 유지함으로써보다 강력하고 효율적인 CSS 아키텍처를 구현할 수 있습니다.

HTML5 : 2024 년 목표HTML5 : 2024 년 목표May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONERFINEMENTANDENDEND 및 최적화, NOTNEWFEATURES.1) 최적화 된 렌더링을 향상시킵니다

HTML5가 개선하려고했던 주요 영역은 무엇입니까?HTML5가 개선하려고했던 주요 영역은 무엇입니까?May 13, 2025 am 12:12 AM

html5aimedtoimprovewebdevelopmentinfourkeyareas : 1) Multimediasupport, 2) Semantictructure, 3) Formcapabilities, 및 4) OfflineandStorageOptions.1) Html5intrudceDandlements, Simplifying MediaembeddingandenUsereXperxpercepence.2) NewSmanticallementalmentalmentementlementmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentalments

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는