jQuery는 이벤트 위임을 통해 여러 이벤트를 한 번에 바인딩하여 이벤트 중복을 줄입니다._jquery

결과적으로 연결은 일상적인 개발에 널리 사용되며 이벤트 메서드 연결은 특별한 경우입니다. 여러 이벤트가 Dom 객체에 바인딩되면 읽고 쓰기가 더 쉽습니다. 나는 직렬 쓰기를 사용하는 데 익숙하지만 이 쓰기 방법은 시간 중복을 발생시킵니다.
1. 이벤트 중복성: 여러 이벤트 메서드에서 동일한 코드를 여러 번 호출
다음 코드는 이벤트 메서드를 연결한 것입니다.

코드 복사 코드는 다음과 같습니다.

jQuery(function($) {
$('

').hide().appendTo('body');
vartipTitle = ''
$('#mytable').bind('mouseover', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
var link = $link[0]
tipTitle = link.title;
link.title = '';
$('#livetip').css({
상단: event.pageY 12,
왼쪽: event.pageX 12
})
.html('

'tipTitle '

' link.href '

')
.show()
};
}).bind('mouseout', function(event) {
var $link = $(event.target).closest('a');
if ($link.length) {
$link.attr('title',tipTitle);
$('#livetip').hide()
}
}).bind('mousemove', function(event) {
var $link = $(event.target).closest('a');
if ( $link.length) {
$('#livetip').css({
위쪽: event.pageY 12,
왼쪽: event.pageX 12
}
})


여기서 5|6, 18|19 및 24|25는 동일한 코드 조각을 여러 번 사용하여 이벤트 개체가 존재하는지 확인합니다. 이는 코드 효율성이나 코드 파일 크기 측면에서 무리한 방법입니다.

2. 이벤트 위임: 여러 이벤트를 한 번에 바인딩하고 이벤트 카테고리에 따라 해당 작업을 위임합니다.
위 코드를 더 효과적으로 최적화하려면 이벤트 위임을 통해 코드를 수정할 수 있습니다. 최종 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

jQuery(function ($) {

var $liveTip = $('

').hide().appendTo('body')
vartipTitle = ' ';
$('#mytable').bind('mouseover mouseout mousemove', function(event) {
var $link = $(event.target).closest('a');
if (!$ link.length) { return; }
var link = $link[0]
if (event.type == 'mouseover' || event.type == 'mousemove') {
$liveTip .css({
top: event.pageY 12,
left: event.pageX 12
})
}if (event.type == 'mouseover) ') {
tipTitle = link.title;
link.title = ''
$liveTip.html('

'tipTitle '

' 링크. href '< /div>')
.show();
if (event.type == 'mouseout') {
$liveTip.hide(); if (tipTitle) {
link.title =
};
})
}); 이벤트는 처리할 DOM 객체에 바인딩되며, 이벤트의 카테고리를 판단하여 코드 내에서 다양한 처리 코드가 위임됩니다. 이는 반복되는 코드 정의를 방지하여 시간 중복을 방지하는 효과를 얻을 수 있습니다.
위 두 코드의 실행 효과는 정확히 동일합니다. 어떤 코드가 실행 효율성이 더 빠른지 한눈에 알 수 있을 것 같아요!
데모 주소
http://demo.jb51.net/js/event_delegation/index.html

패키지 다운로드
http://www.jb51.net/jiaoben/28044. HTML

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

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

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

1 몇 달 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7622

15

Cakephp 튜토리얼

1389

52

Steam의 계정 이름 형식은 무엇입니까?

89

11

Win11 활성화 키 영구

70

19

NYT 연결 힌트와 답변

31

138

더보기