Detailed answers to events in JS (graphic tutorial)

This article mainly introduces JS propagation of events, canceling the default behavior of events, and preventing event propagation. The detailed process is explained through the return value calling sequence of the event handler. Friends in need can refer to it

1. Return value of the event handler

Normally, the return value false tells the browser not to perform the default operation related to 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 attributes are 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 an event:

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 an event is just one of the event cancellations. 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

##js Detailed explanation of judging whether the client can access the Internet

Dynamic operationjsWhat are the methods for/css files

Configuration methods for using sass in vue projects_vue.js

The above is the detailed content of Detailed answers to events in JS (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!