Detailed explanation of JS propagating events, canceling event default behavior, and preventing event propagation

This article mainly introduces JS to propagate events, cancel the default behavior of events, and prevent event propagation. The detailed process is explained through Event processingThe return value calling sequence of the program. Friends who are interested in JS can Refer to this article

1. Return value of event handler

Normally, the return value false is to tell the browser not to execute The default action associated with this event. For example, the onclick event handler of the form submit button can prevent the browser from submitting the form by returning false, and the onclick event handler of the a tag can prevent jumping to the href page by returning false. Similarly, the onkeypress event handler on the input field can filter keyboard input by returning false if the user enters inappropriate characters.
The return value of an event handler is only meaningful for handlers registered through attributes.

2. Calling sequence

Document elements or other objects can register multiple event handlers for specified event types. When the appropriate event occurs, the browser must call all event handlers according to the following rules:

Handlers registered by setting object properties or HTML attributesare always called first.
Handlers registered using addEventListener() are called in the order in which they were registered.
Handlers registered using attachEvent() may be called in any order, so code should not depend on the calling order

3. Event propagation

After calling the event handler registered on the target element, most events will "bubble" to the DOM tree root. Calls the event handler on the target's parent element, and then calls the event handler registered on the target's grandparent element. This goes all the way to the Document object and finally to the Window object.

Most events that occur on document elements bubble up, with notable exceptions being the focus, blur, and scroll events. The load event of the document element will bubble, but it will stop bubbling on the Document object and will not propagate to the Window object. The load event of the Window object will only be triggered when the entire document is loaded.

4. Cancel the default event behavior and prevent event propagation

In browsers that support addEventListener(), you can call the event object's The preventDefault() method cancels the default action of the event. In IE before IE9, the same effect can be achieved by setting the returnValue property of the event object to false. The following piece of code combines three technologies to cancel events:

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

The default operation related to canceling events is only one of event cancellations, and we can also cancel event propagation. In browsers that support addEventListener(), you can call the stopPropagation() method of the event object to prevent the event from continuing to propagate. If other handlers are defined on the same object, the remaining handlers will still be called, but event handlers on any other objects will not be called after calling stopPropagation().

IE before IE9 does not support the stopPropagation() method, but sets the cancelBubble property of the event object to true to prevent further propagation of the event.

Okay, the above is all the content compiled by the editor, I hope it will be helpful to everyone~

Related recommendations:

JavaScript to implement alarm prompts Detailed explanation of sound effects

Detailed explanation of JavaScript priority queue and circular queue examples

JavaScript implementation of three-level cascading special effects example sharing

The above is the detailed content of Detailed explanation of JS propagating events, canceling event default behavior, and preventing event propagation. For more information, please follow other related articles on the PHP Chinese website!