Home > Web Front-end > JS Tutorial > A brief discussion on jquery event processing_jquery

A brief discussion on jquery event processing_jquery

WBOY
Release: 2016-05-16 16:02:37
Original
1099 people have browsed it

In a front-end development system based on jQuery, many events are often bound to a page through various identifiers. Even if the event proxy is simply used, it still causes the events to be scattered, making it difficult to maintain and manage.

So, how to solve this problem? And I thought of the events in backbone. As follows:

Copy code The code is as follows:

events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
}

That is, gathering events together, similar to the concept of an event processing center.

A brief overview of the implementation ideas:

Use the event proxy to bind the event to the body node. (Some events themselves do not bubble, so we will not study them here for the time being)

Give a unified identifier for the execution object of the event.

Execution function of events, centralized processing.

Copy code The code is as follows:





//Event processing center
var ClickEventCenter = {
"handler1": function () {
               // do something...
},
"handler2": function () {
               // do something...
}
// ...
}
//Event binding
$body.on("click", "[data-click-center]", function () {
var handlerName = $(this).data("click-center");
var handler = ClickEventCenter[handlerName]

if ($.isFunction(handler)) handler()
})

In this case, a type of events are gathered together.

At some point, it can play a very good role.

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template