Home > Developer > JavaScript

Javascript AddEventListener () and attachevent () analysis _javascript techniques

Source: Internet
Author: User
Tags documentation object model
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
In Mozilla:

How to use AddEventListener:

Target.addeventlistener (type, listener, usecapture);

Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "MouseOver", "KeyDown", and so on.
Listener: Implements a EventListener interface or a function in JavaScript.
Usecapture: Use capture, generally false. For example: document.getElementById ("Testtext"). AddEventListener ("KeyDown", function (event) {alert (event.keycode);}, False );

in IE:

Target.attachevent (type, listener);
Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", "onkeydown", and so on.
Listener: Implements a EventListener interface or a function in JavaScript. For example: document.getElementById ("TXT"). attachevent ("onclick", function (event) {alert (event.keycode);});

Both the consortium and IE support the removal of the specified event, which is used to remove the set event, in the following format:

format of the consortium:
RemoveEventListener (event,function,capture/bubble);

The format of Windows IE is as follows:

DetachEvent (event,function);


Target.addeventlistener (type, listener, usecapture);
Target document node, document, window, or XMLHttpRequest.
Type string, event name, excluding "on", such as "click", "MouseOver", "KeyDown", and so on.
Listener implements a EventListener interface or a function in JavaScript.
Usecapture whether to use capture, look at the following event flow after a section of the clear, general use false
When an event is triggered, an event object is passed to the events handler, for example:
document.getElementById ("Testtext"). AddEventListener ("KeyDown", function (event) {alert (Event.keycode);, false);
Adapt to the browser version of different, while using the process to pay attention to
Attachevent method button onclick ie using
AddEventListener method button click in Fox
The rationale for the use of the two is that it is not the same as the priority of execution, as the following examples explain:
Attachevent method, attaching additional handling events for an event. (Mozilla series not supported)
AddEventListener Method for Mozilla series
Example: document.getElementById ("btn"). onclick = method1;
document.getElementById ("btn"). onclick = Method2;
document.getElementById ("btn"). onclick = method3; If so, then only the MEDHOT3 will be executed.
Written in this way:
var btn1obj = document.getElementById ("btn1"); Object.attachevent (event,function);
Btn1obj.attachevent ("onclick", method1);
Btn1obj.attachevent ("onclick", method2);
Btn1obj.attachevent ("onclick", method3); execution order is method3->method2->method1
If the Mozilla series, does not support the method, need to use the AddEventListener var btn1obj = document.getElementById ("btn1");
Element.addeventlistener (type,listener,usecapture);
Btn1obj.addeventlistener ("click", Method1,false);
Btn1obj.addeventlistener ("click", Method2,false);
Btn1obj.addeventlistener ("click", Method3,false); execution order is method1->method2->method3
Example: (Note that the div must be placed in front of JS before the line)
Copy Code code as follows:

<body>
<div id= "name1" style= "border:1px solid red;padding:10px 10px 10px 10px; style=" border:1px Solid red;padding:10px 10p x 10px 10px; " >
<div id= "name2" style= "border:1px solid green;padding:10px 10px 10px 10px style=" border:1px "Solid green;padding : 10px 10px 10px 10px; > Click </div>
</div>
<div id= "Info" ></div>
<script type= "Text/javascript" ><!--
var Name1=document.getelementbyid (' name1 '); Should pay attention to
var Name2=document.getelementbyid (' name2 '); Should pay attention to
var Info=document.getelementbyid (' info ');
if (name1.attachevent) {//For Target in front of attachevent we must ensure that it is not empty
Name1.attachevent (' onclick ', function () {info.innerhtml + = "Red" + "<br>";});
Name2.attachevent (' onclick ', function () {info.innerhtml + = "Green" + "<br>";});
}else{
Name1.addeventlistener (' click ', Function () {info.innerhtml + = "Red" + "<br>";},false);
Name2.addeventlistener (' click ', Function () {info.innerhtml + = "Green" + "<br>";},false);
}
--></script>
</body>

From the development Timeline of the Consortium, the model of DOM (Document Object model) can be divided into two types, Dom 0 and Dom 2. You can tell from the numbers that Dom 0 is, of course, the older protocol, and we can look at it from the following table:

DOM1 Agreement:

Event Name

Description

Onblur ()

The element has lost focus (which is, it isn't selected by the user).

Onchange0

The element has either changed (such as by typing into a-text field) or the element has lost focus.

Onclick0

The mouse has been clicked on a element.

OnDblClick ()

The mouse has been double-clicked on a element.

Onfocus ()

The element has gotten focus.

OnKeyDown ()

A keyboard key has been pressed down (as opposed to released) while the element has focus.

onkeypress ()

A keyboard key has been pressed while the element is has focus.

OnKeyUp ()

A keyboard Key has been released while the element is has focus.

OnLoad ()

The element has loaded (document, frameset, or image).

OnMouseDown ()

A mouse button has been pressed.

OnMouseMove ()

The mouse has been moved.

onMouseOut ()

The mouse has been moved off or away from.

onMouseOver ()

The mouse has moved over an element.

OnMouseUp ()

A mouse button has been released.

OnReset ()

The form element has been reset, such as when a form reset button is pressed.

OnResize ()

The window ' s size has been changed.

Onselect ()

The text of a FORM element has been selected.

OnSubmit ()

The form has been submitted.

OnUnload ()

The document or frameset has been unloaded.


The evolution of DOM2:

DOM 0 Event

DOM 2 Event

Onblur ()

Blur

Onfocus ()

Focus

OnChange ()

Change

onMouseOver ()

MouseOver

onMouseOut ()

Mouseout

OnMouseMove ()

MouseMove

OnMouseDown ()

MouseDown

OnMouseUp ()

MouseUp

OnClick ()

Click

OnDblClick ()

DblClick

OnKeyDown ()

KeyDown

OnKeyUp ()

KeyUp

onkeypress ()

KeyPress

OnSubmit ()

Submit

OnLoad ()

Load

OnUnload ()

Unload

The new DOM2 usage can be observed by AddEventListener () This function:

AddEventListener (event,function,capture/bubble);

Parameter event as shown in the previous table, the function is the functions to execute, capture and bubble are two time patterns that are developed by the world's business, and simply capture is read from the beginning of the document to the last line, then execute the event, Bubble, however, looks for the specified location before executing the event.
The Capture/bubble argument is a Boolean value, and true means capture, False is Bubble.windows Internet Explorer also has a EventHandler, is attachevent (), The format is as follows:

Window.attachevent ("Submit", MyFunction ());

In particular, attachevent does not need to specify capture/bubble parameters, because the bubble mode is used in Windows IE environments. Here is an example of an image that shows the use of an event:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"Http://www.w3.org/TR/html4/strict.dtd" >
<title>Rollover</title>
<script type= "Text/javascript" >function moveover (imgobj) {
if (typeof Window.addeventlistener!= "undefined") {
Imgobj.addeventlistener ("MouseOver", function () {IMGOBJ.SRC = Imgobj.id +
"_over.png";}, False);
Imgobj.addeventlistener ("Mouseout", function () {IMGOBJ.SRC = Imgobj.id +
"_default.png";}, False);
} else {
Imgobj.attachevent ("onmouseover", function () {IMGOBJ.SRC = Imgobj.id +
"_over.png";});
Imgobj.attachevent ("onmouseout", function () {IMGOBJ.SRC = Imgobj.id +
"_default.png";});
}
}

function rollover () {
var images = document.getelementsbytagname ("img");
var roll = new RegExp ("rollover");
var preload = [];
for (var i = 0; i < images.length; i++) {
if (Images[i].id.match (roll)) {
Preload[i] = new Image ();
PRELOAD[I].SRC = images[i].id + "_over.png";

Moveover (Images[i]);
}
}
}
if (typeof Window.addeventlistener!= "undefined") {
Window.addeventlistener ("Load", rollover,false);
} else {
Window.attachevent ("onload", rollover)
}
</script>
<body>
<p>alt= "Home" ></p>
<p>alt= "About" ></p>
<p>alt= "Blog" ></p>
<p></p>
</body>

The above typeof Window.addeventlistener!= "undefined" program code can determine whether the user's browser supports AddEventListener this event model and use Attachevent if not supported.

Both the consortium and IE support the removal of the specified event, which is used to remove the set event, in the following format:

Format of the Consortium:

RemoveEventListener (event,function,capture/bubble);

The format of Windows IE is as follows:

DetachEvent (event,function);

Data reference: Chapter 14-browsers and JavaScript, JavaScript step by step, by Steve suehring

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript addeventlistener error machine learning techniques and algorithms quality management tools and techniques javascript performance analysis investments analysis and management addeventlistener capture construction cost analysis and estimating
Related Article
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More