jQuery binds multiple events at once through event delegation to reduce event redundancy

As a result, concatenation is widely used in daily development, and event method concatenation is a special case. If multiple events are bound to a Dom object, it is easier to read and write. I am accustomed to using serial writing, but this writing method will cause time redundancy.
1. Event redundancy: calling the same code multiple times in multiple event methods
The following code is a concatenation of event methods:

Copy code The code is as follows:

jQuery(function($) {
$('

').hide().appendTo('body');
var tipTitle = '';
$('#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({
top: event.pageY 12,
left: 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({
top: event.pageY 12,
left: event.pageX 12
});
};
});
});

where Lines 5|6, 18|19, and 24|25 use the same piece of code multiple times to determine whether the event object exists. This is an unreasonable method in terms of code efficiency and code file size.
2. Event delegation: Bind multiple events at one time and delegate corresponding operations according to event categories
In order to better optimize the above code, you can modify the code through event delegation. The final code is as follows:

Copy code The code is as follows:

jQuery(function($) {
var $liveTip = $('

').hide().appendTo('body');
var tipTitle = '';
$('#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 '

' link.href '< /div>')
.show();
};
if (event.type == 'mouseout') {
$liveTip.hide();
if (tipTitle) {
link.title = tipTitle;
};
};
});
});

This code contains multiple Each event is bound to a DOM object to be processed, and different processing codes are delegated within the code by judging the category of the event. This can avoid repeated definitions of code to achieve the effect of avoiding time redundancy.
The execution effects of the above two codes are exactly the same. I believe you can tell at a glance which code has faster execution efficiency!
Demo addresshttp://demo.jb51.net/js/event_delegation/index.html
Package downloadhttp://www.jb51.net/jiaoben/28044. html

Related labels：

event event delegation binding

source：php.cn

Previous article：jquery validate usage guide step 4_jquery Next article：jquery.validate usage guide Part 3_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jQuery binds multiple events at once through event delegation to reduce event redundancy_jquery