Anwendungsbeispiele für addEventListener_javascript-Fähigkeiten

(要注意的是div必须放到js前面才行)

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

复制代码 代码如下:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

那么将只有method3生效。

如果是Mozilla系列，用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);

执行顺序为method1->method2->method3

如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

=======================================================

Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

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

Die neue DOM2-Nutzung kann mit der Funktion addEventListener() beobachtet werden:

Code kopieren Der Code ist wie folgt folgt:

addEventListener(event, function, capture/bubble);

Der Parameter event ist wie in der Tabelle oben gezeigt, function ist die auszuführende Funktion, Capture und Bubble werden jeweils vom W3C formuliert. Es gibt zwei Zeitmodi. Vereinfacht ausgedrückt liest Capture die letzte Zeile vom Anfang des Dokuments und führt dann das Ereignis aus, während Bubble zuerst nach dem angegebenen Ort sucht und dann das Ereignis ausführt.
Die Parameter von „capture/bubble“ sind boolesche Werte, und „True“ bedeutet „Capture verwenden“, „False“ bedeutet „Blase“. Windows Internet Explorer verfügt außerdem über einen EventHandler, nämlich „attachEvent()“. 🎜>

Code kopieren Der Code lautet wie folgt: window.attachEvent("submit",myFunction());

Das Besondere ist, dass attachmentEvent keine Erfassungs-/Blasenparameter angeben muss, da in der Windows IE-Umgebung der Bubble-Modus verwendet wird.

So ermitteln Sie, ob es sich um einen Überwachungstyp handelt unterstützt? Zum Beispiel:

Code kopieren

Der Code lautet wie folgt: if (typeof window.addEventListener != „undefiniert“) { window.addEventListener("load",rollover,false);

} else {

window.attachEvent("onload",rollover)
}


Der obige Typ von window.addEventListener != „undefiniert“ kann bestimmen, ob der Browser des Benutzers das AddEventListener-Ereignismodell unterstützt.

W3C und IE unterstützen auch das Entfernen des angegebenen Ereignisse werden verwendet, um festgelegte Ereignisse zu entfernen:

W3C-Format:

removeEventListener(event, function, capture/bubble); lautet wie folgt:

detachEvent(event,function);