Javascript Event Processing Mechanism

Event Processing in Javascript

Event processing is divided into three phases:Capture-processing-blister.

Take the button as an example:

Capture phase: from the outer layer to the inner layer, the click capture phase listening method registered for window is called first, and then the document, body, layer-by-layer parent node, until the button itself.

Processing phase: Call the click listening method of the button itself.

Bubble stage: From the button, from the inner layer to the outer layer, call the bubble stage listening method of each parent node in sequence until the window.

However, for IE 8 and earlier versions, the capture phase is not supported. Therefore, event listening in the capture phase is not currently common.

The common event processing method is as follows:

function eventHandler(e) {e = e || window.event;var target = e.target || e.srcElement;... ...}

E is the event object. When an event is triggered, it is passed in as a parameter, but it is not applicable to IE 8 or earlier versions. It can only be accessed through global event variables, fortunately, two events will not be processed simultaneously.

How do I register an event listening method?

(1) Write it directly in HTML and the attributes of DOM elements.

<button id="btn" onclick="alert(123)">CLICK</button><button id="btn2" onclick="eventHandler()">CLICK2</button>

(2) assign a value to the corresponding Dom element in JavaScript.

document.getElementById('btn2').onclick = eventHandler;

(3) addeventlistener

document.getElementById('btn2').addEventListener('click', eventHandler, false);

The third parameter indicates when to trigger eventhandler. False indicates that the event is triggered in the event bubble phase. True indicates that the event is triggered in the event capture phase. True is not often used because event capture is not supported in IE8 or earlier versions.

You can call this registration method multiple times for the same control and register multiple handler.

Removeeventlistener corresponds to it.

In IE 8 and earlier versions, use attachment instead.

document.getElementById('btn2').attachEvent('onclick', eventHandler);

In this case, the browser only supports event bubbles and does not support event capture. Therefore, there is no third parameter.

The detachevent corresponds to it.

Block default browser operations

If the return value of the listener method registered using the first or second method is false, further browser default operations are blocked. Take hyperlink as an example:

<a href="http://www.baidu.com" onclick="alert(1);return false">LINK</a>

After clicking this link, the system does not jump to the Baidu homepage (default operation) because the returned value is false ).

For the listener method registered using the third method, the returned value is invalid. You can use event. preventdefault () to prevent the default browser operation. For IE8 or earlier ie versions, the preventdefault method is not supported and can only be implemented through event. returnvalue = false. Therefore, the common way to prevent default browser operations is:

if(e.preventDefault) {e.preventDefault();} else {e.returnValue = false; // IE8-}

Prevent event bubbles

if(e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}