> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 이벤트 위임을 통해 여러 이벤트를 한 번에 바인딩하여 이벤트 중복을 줄입니다._jquery

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

WBOY
풀어 주다: 2016-05-16 18:24:11
원래의
1090명이 탐색했습니다.

결과적으로 연결은 일상적인 개발에 널리 사용되며 이벤트 메서드 연결은 특별한 경우입니다. 여러 이벤트가 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
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿