1. Return value of event handler
Normally, the return value false tells the browser not to perform default operations 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 for example, the onclick event handler of the a tag prevents jumping to the href page by returning false. Similarly, if the user enters an inappropriate character, the onkeypress event handler on the input field can filter keyboard input by returning false.
The return value of the event handler is only meaningful to the handler registered through the attribute.
2. Call order
Document elements or other objects can register multiple event handlers for a specified event type. When an 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 with addEventListener() are called in the order in which they are registered.
Handlers registered with attachEvent() may be called in any order, so the code should not depend on the order of call
3. Event spread
After calling the event handler function registered on the target element, most events "bubble" to the root of the DOM tree. Calls the event handler for the parent element of the target, and then calls the event handler registered on the grandparent element of the target. This will go all the way to the Document object and finally to the Window object.
Most events that occur on document elements will bubble up, with notable exceptions being the focus, blur, and scroll events. The load event of a document element will bubble, but it will stop bubbleing on the Document object without propagating 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 behavior of events and prevent the spread of events
In browsers that support addEventListener(), the default operation of the event can be cancelled by calling the preventDefault() method of the event object. In IE before IE9, the same effect can be achieved by setting the returnValue property of the event object to false. The following code combines three techniques to cancel the event:
function cancelHandler(event){
var event=event||;// Compatible with IE //Cancel event-related default behavior if() //Standard Technology ();
if() //Compatible with IE before IE9 =false;
return false; //To handle the handler registered with object attributes}
The default actions related to canceling events are just one of event cancellations, and we can also cancel event propagation. In browsers that support addEventListener(), the stopPropagation() method of the event object can be called 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 the event handlers on any other object will not be called after calling stopPropagation().
IE before IE9 did not support the stopPropagation() method, but set the cancelBubble attribute of the event object to true to prevent further propagation of events.