Home > Developer > JavaScript
in Mozilla:
How to use AddEventListener:
Target.addeventlistener (type, listener, usecapture);
Target: Documentation node, document, window, or XMLHttpRequest.
Type: String, event name, without "on", such as "click", "MouseOver", "KeyDown" and so on.
Listener: Implements a EventListener interface or a function in JavaScript.
Usecapture: Whether to use snapping, generally with 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);});
Internet Explorer and IE also support the removal of the specified event, the purpose is to remove the set of events, the format is as follows:
The format of the consortium:
RemoveEventListener (event,function,capture/bubble);
Windows IE has the following format:
DetachEvent (event,function);
Target.addeventlistener (type, listener, usecapture);
Target documentation node, document, window, or XMLHttpRequest.
The type string, the event name, does not contain "on", such as "click", "MouseOver", "KeyDown", and so on.
Listener implements a EventListener interface or a function in JavaScript.
Usecapture whether to use snapping, see the next event stream after the end of the understanding, generally with false
When an event is triggered, an event object is passed to a handler, such as:
document.getElementById ("Testtext"). AddEventListener ("KeyDown", function (event) {alert (event.keycode);}, False);
Adapt to different browser versions, while using the process to pay attention to
Attachevent method button onclick ie in use
AddEventListener method button Click in Fox use
The use of the two principles: the execution of the priority can be different, the following examples are explained below:
The Attachevent method, which attaches additional processing events to 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 this is the case, then only MEDHOT3 will be executed.
Written like this:
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
In the case of the Mozilla series, this method is not supported and needs to be 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 line)
Judging from the development Timeline of the Consortium, the model of DOM (Document Object model) can be divided into two kinds, Dom 0 and Dom 2. As you can see from the numbers, Dom 0 is of course an older protocol, which we can look at in the following table:
DOM1 Agreement:
Event Name |
Description |
Onblur () |
The element has lost focus (which is, it's not selected by the user). |
Onchange0 |
The element has either changed (such as by typing to a text field) or the element has lost focus. |
Onclick0 |
The mouse has a been clicked on an element. |
OnDblClick () |
The mouse has a been double-clicked on an element. |
Onfocus () |
The element has gotten focus. |
OnKeyDown () |
A keyboard key has been pressed down (as opposed to released) and the element has focus. |
onkeypress () |
A keyboard key has been pressed and the element has focus. |
OnKeyUp () |
A keyboard Key has been released and the element 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 have been moved off of or away from an element. |
onMouseOver () |
The mouse has moved over an element. |
OnMouseUp () |
A mouse button has been released. |
OnReset () |
The form element has been reset, and such as when a form of 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. |
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 AddEventListener () This function to observe:
AddEventListener (event,function,capture/bubble);
Parameter event as shown in the table above, function is to execute functions, capture and bubble is the world of two time mode, in short, capture is from the beginning of the document read to the last line, then execute the event, The bubble is to look for the specified position before executing the event.
Capture/bubble parameter is Boolean, true means capture, False is Bubble.windows Internet Explorer has also developed 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 the Windows IE environment. Here is an example of the use of an image to show the usage of the 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 typeof Window.addeventlistener! = "Undefined" program code above can determine whether the user's browser supports AddEventListener this event model and uses attachevent if not supported.
Internet Explorer and IE also support the removal of the specified event, the purpose is to remove the set of events, the format is as follows:
The format of the consortium:
RemoveEventListener (event,function,capture/bubble);
Windows IE has the following format:
DetachEvent (event,function);
Data reference: Chapter 14-browsers and JavaScript, JavaScript step by step, by Steve suehring
AddEventListener () and attachevent () difference analysis of Javascript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
