Attachevent (IE) and addeventlistener (FF)

Mozilla:

How to Use addeventlistener:

Target. addeventlistener (type, listener, usecapture );

Target: Document node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "Mouseover", and "keydown.
Listener: implements the eventlistener interface or functions in JavaScript.
Usecapture: whether to use capture. Generally, false is used. For example, document. getelementbyid ("testtext"). addeventlistener ("keydown", function (event) {alert (event. keycode) ;}, false );

IE:

Target. attachevent (type, listener );
Target: Document node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", and "onkeydown. (It is not an event, it is an event handle)
Listener: implements the eventlistener interface or functions in JavaScript. For example, document. getelementbyid ("TXT"). attachevent ("onclick", function (event) {alert (event. keycode );});

(Addeventlistener is W3C standard event API, but IE does not support the standard capture bubble event model. Therefore, it only supports attachevent of parameter 2 and does not know the name difference. The third parameter of addeventlistener is, if it is false, it is the event handler of the bubble process. If it is true, it is the event handler of the capture process. ie only supports the bubble, so it is not necessary to add the third parameter, and click is an event, onclick is the event handler, but it does not have the on difference)

Addeventlistener is used to register event processingProgramIn IE, It is attachevent. Why do we talk about addeventlistener instead of attachevent? First, attachevent is relatively simple, and second, addeventlistener is the standard content in Dom.

Introduction

Addeventlistener registers the event handler for the document node, document, window, or XMLHttpRequest. In the past, we generally used the <input type = "button" onClick = "...", or document. getelementbyid ("testbutton"). OnClick = funcname. In Dom, we use addeventlistener (attachevent in IE ).

Syntax

Target. addeventlistener (type, listener, usecapture );

 

• Target file node, document, window, or XMLHttpRequest.
• Type string, event name, excluding "on", such as "click", "Mouseover", and "keydown.
• Listener implements the eventlistener interface or javasFunctions in callback.
• Whether or not usecapture uses capture. After reading the event stream section, you will understand it. Generally, false is used.

Example

Function go ()

{

//...

}

Document. getelementbyid ("testbutton"). addeventlistener ("click", go, false );

Or listener is a function.

Document. getelementbyid ("testbutton"). addeventlistener ("click", function () {...}, false );

 

 

 

Addeventlistener-event stream

When it comes to addeventlistener, we have to talk about the event stream. It is easier to explain the event stream later.

When an event occurs, it is divided into three phases:

The capture phase starts sequentially from the root node and checks whether an event handler is registered for each node. If the event handler is registered and usecapture is true, the event handler is called. (Ie does not have this stage .)

The target phase triggers the event handler registered on the target object, also known as the normal event dispatching phase.

In the bubble stage, from the target node to the root node, check whether an event handler is registered for each node. If an event handler is registered and usecapture is false, the event handler is called.

Example

<Div id = "div1">

<Div id = "div2">

<Div id = "div3">

<Div id = "div4">

</Div>

</Div>

</Div>

</Div>

If you click the mouse on d3, the event stream is like this:

The capture phase checks whether there are Event Handlers whose usecapture is true at div1. If so, execute the program and then process div2 in the same way.

The target stage is in div3 and it is found that div3 is the node clicked by the mouse. Therefore, this is the target stage. If there is an event processing program, execute this program, no matter whether usecapture is true or false.

In the bubble stage, check whether there is an event handler whose usecapture is false at div2. If so, execute the program and then process div1 in the same way.

Note: In the above capture and bubble phases, there should actually be nodes above div1, such as bodies, but we will not discuss them here.

 

 

 

 

 

Addeventlistener-third parameter usecapture

 

Addeventlistener has three parameters: the first parameter indicates the event name (not including on, such as "click"); the second parameter indicates the function for Receiving Event processing; the third parameter is usecapture, this article will explain it.

<Div id = "outdiv">

<Div id = "middlediv">

<Div id = "indiv"> click here. </Div>

</Div>

</Div>

<Div id = "info"> </div>

 

VaR outdiv = Document. getelementbyid ("outdiv ");

VaR middlediv = Document. getelementbyid ("middlediv ");

VaR indiv = Document. getelementbyid ("indiv ");

VaR info = Document. getelementbyid ("info ");

 

Outdiv. addeventlistener ("click", function () {info. innerhtml + = "outdiv" + "<br>" ;}, false );

Middlediv. addeventlistener ("click", function () {info. innerhtml + = "middlediv" + "<br>" ;}, false );

Indiv. addeventlistener ("click", function () {info. innerhtml + = "indiv" + "<br>" ;}, false );

The above is what we testedCodeThe trigger sequence is determined based on the display of info. There are three addeventlistener, and the optional values of usecapture are true and false, SO 2*2*2, 8 different programs can be obtained.

• When all values are false, the trigger sequence is indiv, middlediv, and outdiv;
• When all values are true, the trigger sequence is outdiv, middlediv, and indiv;
• When outdiv is set to true and others are set to false, the trigger sequence is outdiv, indiv, and middlediv;
• If the value of middlediv is true, the trigger sequence is middlediv, indiv, and outdiv;
• ......

Finally, the following conclusions are drawn:

• The trigger sequence of true is always before false;
• If multiple values are true, the triggering of the outer layer prevails over the inner layer;
• If multiple values are false, the triggering of the inner layer is prior to that of the outer layer.