Which JS events are not propagated upward?

Which JS events will not bubble?

In JavaScript, event bubbling means that when an element triggers an event, the event will bubble up to higher-level elements step by step until it bubbles to the document root node. The event handlers are then executed in the order they bubble up.

However, not all events will bubble up. Some events will only execute the event handler on the target element after being triggered, without bubbling up to higher-level elements. The following are some common events that do not bubble:

1. focus and blur events: These two events are triggered when an element gains focus and loses focus respectively. They do not bubble up to parent elements or higher-level elements.
2. Change event: Triggered when the value of the input, select or textarea element changes. Change events usually do not bubble to the parent element, but if a proxy event handler is used (that is, through event delegation), it can bubble to the proxy element.
3. submit event: Triggered when the form in the form element is submitted. The submit event does not bubble up to the parent element, but the submit event can be captured by binding an event handler on the form element.
4. Focusin and focusout events: These two events are similar to focus and blur, but they can bubble. focusin is triggered when an element gains focus, while focusout is triggered when an element loses focus. They can capture bubbling by setting the event handler's useCapture parameter to true.

It should be noted that although the above events will not bubble to the parent element or higher-level elements, they will bubble to the window object. Therefore, you can catch these events by listening on the window object.

In addition, there are some special cases where events may not be propagated in the normal bubbling order. For example, if the stopPropagation() method is used to prevent the event from bubbling, the event will not bubble further to higher-level elements.

Summary: In JavaScript, some events will not bubble up to parent elements or higher-level elements, including focus, blur, change, and submit events. Understanding these non-bubbling events is very important for handling events correctly and can help us better control and manage interactive behaviors in the page.

The above is the detailed content of Which JS events are not propagated upward?. For more information, please follow other related articles on the PHP Chinese website!