Event mechanism and blocking in jq and js

Event binding in JQuery is all event bubbling. In this article, we will share with you the event mechanism and prevention in jq and js.

The several ways to bind event processing functions in JQuery do not allow us to pass the event type (whether the event is bubbling or event capture). For example:

.on(events [, selector ] [, data ], handler)

Parameters
events - String type One or more event types separated by spaces and optional namespaces, such as "click", "focus click", "keydown.myPlugin".
eventsMap - Object type is an Object object, each of its attributes corresponds to the event type and optional namespace (parameter events), and the attribute value corresponds to the bound event processing function (parameter handler).
selector - Optional/String type A jQuery selector used to specify which descendant elements can trigger bound events. If this parameter is null or omitted, it means that the current element itself is bound to the event (the actual triggerer may also be a descendant element, as long as the event stream can reach the current element).
data - When an optional/any type of event is triggered, any data needs to be passed to the event processing function through event.data.
handler - Event handling function specified by Function type.

The addEventListener() provided by native javascript allows setting the type of event

element.addEventListener(event, function, useCapture)

Parameters
event - Required. String specifying the event name.

Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

function - Required. Specify the function to be executed when the event is triggered.

When the event object is passed into the function as the first parameter. The type of event object depends on the specific event. For example, the "click" event belongs to the MouseEvent object.
useCapture - Optional. A Boolean value that specifies whether the event is executed in the capture or bubbling phase.

Possible values:
true - the event handler is executed during the capture phase
false- false-default. The event handle is executed in the bubbling phase

Two ways to prevent event propagation

Method 1: Use the stopPropagation() function of the event object. This approach is consistent with JavaScript.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Method 2: The return value of the event processing function is false. The addEventListener in JavaScript does not have this function.

$("#outC").click(function(event){  
    return false;  
});

Copyright statement: This article was first published on my personal website Keyon Y. Please indicate the source when reprinting.

Event binding in JQuery all belongs to event bubbling.

The several ways to bind event processing functions in JQuery do not allow us to pass the event type (either event bubbling or event capture). For example:

.on(events [, selector ] [, data ], handler)

Parameters
events - String type one or more event types separated by spaces and optional namespaces, such as "click", "focus click", "keydown.myPlugin".
eventsMap - Object type is an Object object, each of its attributes corresponds to the event type and optional namespace (parameter events), and the attribute value corresponds to the bound event processing function (parameter handler).
selector - Optional/String type A jQuery selector used to specify which descendant elements can trigger bound events. If this parameter is null or omitted, it means that the current element itself is bound to the event (the actual triggerer may also be a descendant element, as long as the event stream can reach the current element).
data - When an optional/any type of event is triggered, any data needs to be passed to the event processing function through event.data.
handler - Event handling function specified by Function type.

The addEventListener() provided by native javascript allows setting the type of event

element.addEventListener(event, function, useCapture)

Parameters
event - Required. String specifying the event name.

Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

function - Required. Specify the function to be executed when the event is triggered.

When the event object is passed into the function as the first parameter. The type of event object depends on the specific event. For example, the "click" event belongs to the MouseEvent object.
useCapture - Optional. A Boolean value that specifies whether the event is executed in the capture or bubbling phase.

Possible values:
true - the event handler is executed during the capture phase
false- false-default. The event handle is executed in the bubbling phase

Two ways to prevent event propagation

Method 1: Use the stopPropagation() function of the event object. This approach is consistent with JavaScript.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Method 2: The return value of the event processing function is false. The addEventListener in JavaScript does not have this function.

$("#outC").click(function(event){  
    return false;  
});

Related recommendations:

JavaScript event mechanism

A first look at JQuery (2) Event mechanism (1)_jquery

A brief analysis of the event mechanism in JavaScript_Basic knowledge

The above is the detailed content of Event mechanism and blocking in jq and js. For more information, please follow other related articles on the PHP Chinese website!