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

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

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7844

15

Java Tutorial

1649

14

CakePHP Tutorial

1403

52

Laravel Tutorial

1300

25

PHP Tutorial

1241

29

Show More