Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use the jquery event delegation method, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this jquery event delegation method. Let's take a look at it.

Jquery event delegation methods include: 1, blind () method, which is mainly used to bind events to selected elements; 2, live () method, which adds one or more event handlers to current or future matching elements; 3, delegate () method; 4, on () method, which is used to bind listening events to the nearest parent element.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

What is event delegation?

The event of the child element is delegated to the parent element, rather than assigned to the child element to bind the event itself, and then find the corresponding event.target when the event is triggered

Refers to the use of event bubbling to specify only one event handler to manage all events of a certain type

Why use event delegation?

Because the number of event handlers added to the page in js will affect the overall performance of the page.

Secondly, it is too troublesome to add event handlers to the list one by one, so event delegation greatly improves the performance of the page.

Traversing the binding event to the li under the ul through the for loop does not seem to be a problem, but it actually affects the performance of the page.

At this point, the event delegate in bubble mode is used to solve the problem.

However, it is thought that events bound to ul will not affect every li after implementation.

In this case, there is a new concept: event source: no matter which element the event is bound to, it refers to the inner target of the actual trigger event.

Event.target

Eg:ul.onclick=function (event) {}

The simple point is to reduce DOM access, reduce memory, and improve the performance of pages.

What are the delegate methods for jquery events

1 、 blind

Definition and usage: mainly used for event binding to selected elements

Syntax:

Blind ("event type", data,function () {}); / / data is the parameter of the passed function obtained by event.data (the usual .click () is its simplified usage)

It is suitable for static pages and can only be bound to elements that already exist when it is called, not to new elements in the future.

Blind is performed only when the page is loaded.

2. Live (not supported after 1.7)

Definition: add one or more event handlers to current or future matching elements

Syntax:

Live ("event type", data, function name); / / data optional

Features: live does not bind events to itself (this), but to this.context

It is precisely that the event delegation mechanism is used to complete the listening processing of the event, and the processing of the node is delegated to document.

Newly added elements do not need to be bound to listeners again, but can handle multiple events

Can only be placed after directly selected elements

3 、 delegate

Definition: bind the listening event to the nearest parent element, because the event can bubble up faster

Syntax:

Delegate (selector,type, [data], fn)

Features: more accurate small-scale use of event agents, performance better than .live (). Can be used on dynamically added elements.

("parent selector") .delegate (".a", "click", function ()) / / indicates that the event of .an is delegated through the parent element, and (this) gets the child element that triggers the event.

4 、 on

Define; bind listening events to the nearest parent element

Syntax:

On (type, selector, method)

Features: newly added tags under the parent element can also be used to listen for events

Multi-time event handling is also supported.

This is the end of the article on "how to use the jquery event delegation method". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use the jquery event delegation method". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.