A brief discussion on jquery event processing_jquery

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.