JQuery delegates events to bind multiple events at a time to reduce event redundancy.

As a result, a large number of concatenation methods are used in daily development, and event Method concatenation is a special case. If you bind multiple events to a Dom object to facilitate reading and writing, you are used to the concatenation method. However, such writing method may cause time redundancy.
1. Event redundancy: the same code is called multiple times in multiple event methods.
The following code is an event Method concatenation:
Copy codeThe Code is as follows:
JQuery (function ($ ){
$ ('<Div id = "livetip"> </div>'). hide (). appendTo ('body ');
Var tipTitle = '';
$ ('# Mytable'). bind ('mouseover', function (event ){
Var $ link = events (event.tar get). closest ('A ');
If ($ link. length ){
Var link = $ link [0];
TipTitle = link. title;
Link. title = '';
Certificate ('{livetip'}.css ({
Top: event. pageY + 12,
Left: event. pageX + 12
})
. Html ('<div>' + tipTitle + '</div> <div>' + link. href + '</div> ')
. Show ();
};
}). Bind ('mouseout', function (event ){
Var $ link = events (event.tar get). closest ('A ');
If ($ link. length ){
$ Link. attr ('title', tipTitle );
$ ('# Livetip'). hide ();
};
}). Bind ('mousemove ', function (event ){
Var $ link = events (event.tar get). closest ('A ');
If ($ link. length ){
Certificate ('{livetip'}.css ({
Top: event. pageY + 12,
Left: event. pageX + 12
});
};
});
});

Among them, lines 5th | 6, 18th | 19, and 24th | 25 use the same code multiple times to determine whether the event object exists. This method is unreasonable in terms of code efficiency and code file size.
2. Event delegation: bind multiple events at a time and assign corresponding operations according to the event category.
To better optimize the above code, you can modify the code through event delegation. The modified code is as follows:
Copy codeThe Code is as follows:
JQuery (function ($ ){
Var $ liveTip = $ ('<div id = "livetip"> </div>'). hide (). appendTo ('body ');
Var tipTitle = '';
$ ('# Mytable'). bind ('mouseover mouseout mousemove', function (event ){
Var $ link = events (event.tar get). closest ('A ');
If (! $ Link. length) {return ;}
Var link = $ link [0];
If (event. type = 'mouseover' | event. type = 'mousemove '){
Export livetip.css ({
Top: event. pageY + 12,
Left: event. pageX + 12
});
};
If (event. type = 'mouseover '){
TipTitle = link. title;
Link. title = '';
Export livetip.html ('<div>' + tipTitle + '</div> <div>' + link. href + '</div> ')
. Show ();
};
If (event. type = 'mouseout '){
$ LiveTip. hide ();
If (tipTitle ){
Link. title = tipTitle;
};
};
});
});

In this section of code, multiple events are bound to a DOM object to be processed at a time, and different processing codes are delegated by judging the event category within the code. This avoids repeated code definitions to avoid time redundancy.
The execution results of the above two types of code are exactly the same. I believe you will be able to take a fancy to which kind of code is more efficient!
Demo address http://demo.jb51.net/js/event_delegation/index.html
Package download http://www.jb51.net/jiaoben/28044.html