What are the jquery event delegation methods?

jquery event delegation methods include: 1. blind() method, mainly used to bind events to selected elements; 2. live() method, add one or more matching elements to the current or future event handler; 3. delegate() method; 4. on() method, 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 events of the child element are delegated to the parent element, instead of assigning it to the child element to bind the event itself, and then find the corresponding event.target when the event is triggered

It refers to using event bubbling and specifying 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 running performance of the page

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

Through the for loop to traverse and bind events to the li under the ul, it seems that there is no problem, but in fact it greatly affects the performance of the page.

At this time, the bubbling mode event delegation is used to solve the problem. However, if you think about the events bound to ul, won't every li be affected after implementation?

This case introduces a new concept: event source: No matter which element the event is bound to, it refers to the target that actually triggers the event

event.target

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

The simple point is to reduce DOM access, reduce memory, and improve the running performance of the page

jquery event delegation method What are the

1. Definition and usage of blind

: Mainly used to bind events to selected elements

Grammar:

blind("事件类型"，data,function(){ });
//data是传入函数的参数用event.data获取（平时用的.click()等都是其简化用法）

Features; Suitable for static pages, it can only be bound to elements that already exist when it is called, and cannot be bound to elements added in the future

When the page is loaded , perform blind;

2. live (not supported after 1.7)

Definition: Add one or more event handlers to the current or future matching elements;

Grammar:

live("事件类型",data, 函数名);//data可选

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

It is used The event delegation mechanism completes the monitoring and processing of events, and delegates the processing of nodes to document

Newly added elements do not need to be bound to a listener again, and multiple event processing

can only be placed in direct selection Behind the element

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 use of event proxies in a small range, performance is better than .live(). Can be used on dynamically added elements.

("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素

4, on

Definition; Bind the listening event to the nearest parent element

Syntax:

on(type, 选择器，方法)

Features : You can also use event monitoring for newly added tags under the parent element

Also supports multi-time event processing

[Recommended learning:

jQuery video tutorial

, web front-end video】

The above is the detailed content of What are the jquery event delegation methods?. For more information, please follow other related articles on the PHP Chinese website!