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 '')
.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