Zusammenfassung der Javascript-Kenntnisse des js-Ereignisüberwachungsmechanismus (Ereigniserfassung).

Im Prozess der Front-End-Entwicklung stoßen wir häufig auf das Problem, Ereignisse zu Seitenelementen hinzuzufügen. Es gibt viele js-Methoden zum Hinzufügen von Ereignissen. Einige werden direkt zur Seitenstruktur hinzugefügt, andere verwenden einige js-Ereignisüberwachungsmethoden Aufgrund verschiedener Browser-Server gibt es unterschiedliche Mechanismen für die Ereignis-Bubbling und die Ereignisüberwachung. Der LE-Browser verfügt nur über einen Ereignis-Bubbling-Mechanismus und keinen Ereignisüberwachungsmechanismus. Das größte Problem ist:

1. Ereignismethoden direkt in die Seitenstruktur schreiben

function eventfun(){ 
//console.log(this); 
} 
<input type="button" onclick="eventfun()" value="button" />//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是[object Window],this指向的是window.

Um das Problem dieses Bereichs zu lösen, können Sie die Methode des Hinzufügens von Ereignisvariablen zur globalen Funktion verwenden und dieses Objekt als Parameter an die Funktion innerhalb der Seitenstruktur übergeben

<input type="button" onclick="eventfun2(this)" value="button2" /> 
function eventfun2(eve){//在这里把事件对象作为参数传递到全局方法里 
eve.name="alex"; 
window.name="robin"; 
console.log(this);//[object Window] 
console.log(eve);// [object HTMLInputElement] 
console.log(this.name);// robin 
console.log(eve.name);// alexvar 
self=eve; 
console.log(this.name);//robin 
console.log(self.name);//alex 
alert(window.name); 
alert(self.name); 
}

2. Die Verwendung der Methode zum Zuweisen von Werten zu Ereignisattributen ist eine Methode zum Binden von Ereignissen. Die Einschränkung dieser Methode besteht jedoch darin, dass nur eine Methode an das Ereignis gebunden werden kann Vorbehaltlich

wird die Methode verwendet

HTMLElementobject.onclick = fucntion(){//Bei Verwendung dieser Methode zum Zuweisen von Werten zu Ereignisattributen zeigt der Zeiger auf das Fensterobjekt und nicht auf das Ereignisobjekt, sodass diese Methode eine Referenz ist

//js code 
fun1(); 
fun2(); 
fun3(); 
console.log(this);//window.object 
} 
function dosomething(){ 
//js code 
} 
HTMLElementobject.onclick = dosomething;//使用这种为事件对象属性赋值的形式，this指针指向事件执行对象 
console.log(this);//htmlElementObject

3. Ereignisausbreitung – Sprudeln und Einfangen
Der DOM-Ereignisstandard definiert zwei Ereignisflüsse, die sich erheblich unterscheiden und erhebliche Auswirkungen auf Ihre Anwendung haben können. Die beiden Ereignisströme erfassen und sprudeln. Wie viele Webtechnologien haben Netscape und Microsoft sie jeweils unterschiedlich implementiert, bevor sie zu Standards wurden. Netscape entschied sich für die Implementierung des Capture-Ereignisstroms und Microsoft implementierte den Bubbling-Ereignisstrom. Glücklicherweise hat sich das W3C für eine Kombination dieser beiden Methoden entschieden, und die meisten neuen Browser folgen beiden Event-Streaming-Methoden.
Standardmäßig verwenden Ereignisse den sprudelnden Ereignisstrom und nicht den erfassenden Ereignisstrom. In Firefox und Safari können Sie jedoch explizit angeben, dass der Capture-Ereignisstrom verwendet werden soll, indem Sie beim Registrieren des Ereignisses den Parameter „useCapture“ übergeben und diesen Parameter auf „true“ setzen.
Sprudelnder Event-Stream
Wenn ein Ereignis für ein bestimmtes DOM-Element ausgelöst wird, beispielsweise wenn der Benutzer mit der Maus auf den Knoten „Kundenname“ klickt, folgt das Ereignis den übergeordneten Knoten, von denen der Knoten erbt, und durchläuft die gesamte DOM-Knotenhierarchie, bis es auf den Knoten trifft, von dem der Knoten erbt Der Knoten des Ereignistyp-Handlers ist zu diesem Zeitpunkt ein Onclick-Ereignis. Das Ereignis-Bubbling kann jederzeit während des Bubbling-Vorgangs beendet werden. In Browsern, die dem W3C-Standard entsprechen, können Sie die stopPropagation()-Methode für das Ereignisobjekt aufrufen. In Internet Explorer können Sie die Eigenschaft cancelBubble des Ereignisobjekts festlegen WAHR. . Wenn Sie die Ausbreitung des Ereignisses nicht stoppen, sprudelt das Ereignis weiter durch das DOM, bis es das Dokumentstammverzeichnis erreicht.
Erfassen Sie den Ereignisstrom
Die Ereignisverarbeitung beginnt an der Wurzel der DOM-Hierarchie und nicht am Zielelement, das das Ereignis ausgelöst hat. Das Ereignis wird der Reihe nach von allen Vorgängerelementen des Zielelements weitergegeben. In diesem Prozess wird das Ereignis von jedem geerbten Element vom Dokumentstamm bis zum Ereigniszielelement erfasst. Wenn der Ereignis-Listener das useCapture-Attribut bei der Registrierung auf true setzt, können sie in diesem Zeitraum an jedes Element gesendet werden. Element zum Behandeln des Ereignisses; andernfalls wird das Ereignis an das nächste Element auf dem Pfad zum abgeleiteten Element bis zum Zielelement übergeben. Nachdem das Ereignis das Zielelement erreicht hat, strömt es durch die DOM-Knoten.
Moderne Event-Bindungsmethoden
Wie in der vorherigen Lektion erläutert, weist die Verwendung der herkömmlichen Ereignisbindung viele Nachteile auf, beispielsweise die Unfähigkeit, mehrere Ereignishandler für dasselbe Ereignis auf einem Objekt zu registrieren. Browser und das W3C haben dies nicht berücksichtigt und verfügen daher in modernen Browsern über eigene Methoden zum Binden von Ereignissen.
W3C DOM
obj.addEventListener(evtype,fn,useCapture) – Vom W3C bereitgestellte Methode zum Hinzufügen einer Ereignisbehandlungsfunktion. obj ist das Objekt zum Hinzufügen des Ereignisses, evtype ist der Ereignistyp ohne on-Präfix, fn ist die Ereignisverarbeitungsfunktion. Wenn useCapture wahr ist, wird die Ereignisverarbeitungsfunktion in der Erfassungsphase ausgeführt, andernfalls wird sie in der Bubbling-Phase < ausgeführt 🎜> obj.removeEventListener(evtype,fn,useCapture) – Vom W3C bereitgestellte Methode zum Löschen der Event-Handler-Funktion
Microsoft IE-Methode
obj.attachEvent(evtype,fn) – Die vom IE bereitgestellte Methode zum Hinzufügen einer Ereignisverarbeitungsfunktion. obj ist das Objekt zum Hinzufügen des Ereignisses, evtype ist der Ereignistyp mit dem Präfix on, fn ist die Ereignisverarbeitungsfunktion, IE unterstützt keine Ereigniserfassung
obj.detachEvent(evtype,fn,) – Die vom IE bereitgestellte Methode zum Löschen von Ereignisverarbeitungsfunktionen evtype enthält das on-Präfix

Methoden zur Integration der beiden

function addEvent(obj,evtype,fn,useCapture) { 
if (obj.addEventListener) { 
obj.addEventListener(evtype,fn,useCapture); 
} else { 
obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获 
} else { 
obj["on"+evtype]=fn;//事实上这种情况不会存在 
} 
} 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) { 
obj.removeEventListener(evtype,fn,useCapture); 
} else { 
obj.detachEvent("on"+evtype,fn); 
} else { 
obj["on"+evtype]=null; 
} 
}

Es liegt ein Problem mit der Attach-Methode des IE vor. Bei Verwendung von attachmentEvent verweist dies innerhalb der Ereignisverarbeitungsfunktion auf window, nicht auf obj! Dafür gibt es natürlich eine Lösung!

Aber die attachmentEvent-Methode des IE hat ein anderes Problem. Dieselbe Funktion kann mehrmals für dasselbe Objekt und dasselbe Ereignis registriert werden. Die Lösung: Verlassen Sie die attachmentEvent-Methode des IE. Die attachmentEvent-Methode unter IE unterstützt keine Erfassung und unterscheidet sich nicht wesentlich von der herkömmlichen Ereignisregistrierung (außer dass sie mehrere Ereignisverarbeitungsfunktionen binden kann), und die attachmentEvent-Methode von IE weist ein Speicherverlustproblem auf!

addEvent,delEvent moderne Version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js事件监听</title> 
<style> 
table td{font:12px; border-bottom:1px solid #efefef;} 
</style> 
</head> 

<body> 
<div id="outEle" style="padding:10px; border:1px solid #b2b2b2; background:#efefef;"> 
<input type="button" onclick="eventfun()" id="button" value="button" /><br /> 
<input type="button" onclick="eventfun2(this);" id="button2" value="button2" /><br /> 
<input type="button" id="button3" value="button3" /><br /> 
<input type="button" id="button4" value="button4" /><br /> 
<table id="htmlEleTable" width="100%" border="0" style="border:1px solid #b2b2b2; background:#fff;"> 
<tr id="1111"><td>111111111111111111111111111111</td></tr> 
<tr id="22222"><td>222222222222222222222222222222</td></tr> 
<tr id="33333"><td>333333333333333333333333333333</td></tr> 
<tr id="4444"><td>444444444444444444444444444444</td></tr> 
<tr id="55555"><td>555555555555555555555555555555</td></tr> 
</table> 
</div> 
<script language="javascript" type="text/javascript"> 
function eventfun(){//1.直接把js方法写在页面结构上 
console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window 
alert(this); 
} 
function eventfun2(eve){//在这里把事件对象作为参数传递到全局方法里 
eve.name="alex";// 
window.name="robin"; 
console.log(this);//[object Window] 
console.log(eve);// [object HTMLInputElement] 
console.log(this.name);// robin 
console.log(eve.name);// alex 
var self=eve; 
console.log(this.name);//robin 
console.log(self.name);//alex 
alert(window.name); 
alert(self.name); 
} 
function eventfun3(){//1.直接把js方法写在页面结构上 
console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window 
console.log(this.id); 
alert(this); 
alert(this.id); 
//var outEleObj = EventUtil.$("outEle"); 
//removeEvent(outEleObj,"click",eventfun3); 
} 
/* 
var EventUtil = {}; 
EventUtil.$ = function(id){ 
return document.getElementById(id); 
} 
EventUtil.openmes = eventfun3; 
EventUtil.addEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数 
if(eventTarget.attachEvent){ 
eventTarget.attachEvent("on"+eventtype,eventHandle); 
}else if(eventTarget.addEventListener){ 
eventTarget.addEventListener(eventtype,eventHandle,false) 
}else{ 
eventTarget["on" + eventtype] = null; 
} 

}; 
EventUtil.deleEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数 
if(eventTarget.detachEvent){ 
alert("on"+eventtype); 
alert("on"+eventHandle); 
eventTarget.detachEvent("on"+eventtype,eventHandle); 
}else if(eventTarget.removeEventListener){ 
eventTarget.removeEventListener(eventtype,eventHandle,false) 
}else{ 
eventTarget["on" + eventtype] = null; 
} 

};*/ 
var EventUtil={ 
$:function(id){ 
return document.getElementById(id); 
}, 
but4fun:function(){ 
console.log(this); 
this.addEventHandle(); 
}, 
eventfun3:function (){ 
console.log(this); 
alert(this); 
delEvent(obj,evtype,fn,useCapture); 
} 
} 
/***使用addEventListener,attachEvent进行dom事件的监听 
function addEvent(obj,evtype,fn,useCapture){ 
if (obj.addEventListener) { 
obj.addEventListener(evtype,fn,useCapture); 
}else if(obj.attachEvent){ 
obj.attachEvent("on"+evtype,function () { 
fn.call(obj); 
}); 
}else { 
obj["on"+evtype]=fn;//事实上这种情况不会存在 
} 
} 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) { 
obj.removeEventListener(evtype,fn,useCapture); 
} else if(obj.detachEvent){ 
obj.detachEvent("on"+evtype,fn); 
} else { 
obj["on"+evtype]=null; 
} 
} 



function addEvent(obj,evtype,fn,useCapture) { 
if (obj.addEventListener) {//优先考虑W3C事件注册方案 
obj.addEventListener(evtype,fn,!!useCapture); 
} else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定 
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;} 
//为每个事件处理函数分配一个唯一的ID 

if (!obj.__EventHandles) {obj.__EventHandles={};} 
//__EventHandles属性用来保存所有事件处理函数的引用 

//按事件类型分类 
if (!obj.__EventHandles[evtype]) {//第一次注册某事件时 
obj.__EventHandles[evtype]={}; 
if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数 
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到预留的0位 
//并且给原来的事件处理函数增加一个ID 
} 
obj["on"+evtype]=addEvent.execEventHandles; 
//当事件发生时，execEventHandles遍历表obj.__EventHandles[evtype]并执行其中的函数 
} 
} 
} 

addEvent.__EventHandlesCounter=1;//计数器,0位预留它用 
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行 
if (!this.__EventHandles) {return true;} 
evt = evt || window.event; 
var fns = this.__EventHandles[evt.type]; 
for (var i in fns) { 
fns[i].call(this); 
} 
}; 
/* 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数 
obj.removeEventListener(evtype,fn,!!useCapture); 
} else { 
if (obj.__EventHandles) { 
var fns = obj.__EventHandles[evtype]; 
if (fns) {delete fns[fn.__EventID];} 
} 
} 
} 

function fixEvent(evt) {//fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最好的方法是把它整合到addEvent函数的execEventHandles里面 
if (!evt.target) { 
evt.target = evt.srcElement; 
evt.preventDefault = fixEvent.preventDefault; 
evt.stopPropagation = fixEvent.stopPropagation; 
if (evt.type == "mouseover") { 
evt.relatedTarget = evt.fromElement; 
} else if (evt.type =="mouseout") { 
evt.relatedTarget = evt.toElement; 
} 
evt.charCode = (evt.type=="keypress")&#63;evt.keyCode:0; 
evt.eventPhase = 2;//IE仅工作在冒泡阶段 
evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间 
} 
return evt; 
} 
fixEvent.preventDefault =function () { 
this.returnValue = false;//这里的this指向了某个事件对象，而不是fixEvent 
}; 
fixEvent.stopPropagation =function () { 
this.cancelBubble = true; 
};*/ 
//console.log(EventUtil.$("button3"));//返回EventUtil函数的对象属性 
//EventUtil.$("button3").onclick= eventfun;//2.使用为对象事件属性赋值的方法来实现事件的监听 
//EventUtil.$("button3").onclick= eventfun2;//为事件属性添加多个方法时，为后者 
//EventUtil.$("button3").onclick= eventfun;//事件捕获是从事件对象逐层外父级检察一直到window对象 
var EventUtil =function(){ 
function getByid(id){ 
return document.getElementById(id); 
}; 
// written by Dean Edwards, 2005 
// with input from Tino Zijdel, Matthias Miller, Diego Perini 

// http://dean.edwards.name/weblog/2005/10/add-event/ 

function addEvent(element, type, handler) { 
if (element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
// assign each event handler a unique ID 
if (!handler.$$guid) handler.$$guid = addEvent.guid++; 
// create a hash table of event types for the element 
if (!element.events) element.events = {}; 
// create a hash table of event handlers for each element/event pair 
var handlers = element.events[type]; 
if (!handlers) { 
handlers = element.events[type] = {}; 
// store the existing event handler (if there is one) 
if (element["on" + type]) { 
handlers[0] = element["on" + type]; 
} 
} 
// store the event handler in the hash table 
handlers[handler.$$guid] = handler; 
// assign a global event handler to do all the work 
element["on" + type] = handleEvent; 
} 
}; 
// a counter used to create unique IDs 
addEvent.guid = 1; 

function removeEvent(element, type, handler) { 
if (element.removeEventListener) { 
element.removeEventListener(type, handler, false); 
} else { 
// delete the event handler from the hash table 
if (element.events && element.events[type]) { 
delete element.events[type][handler.$$guid]; 
} 
} 
}; 

function handleEvent(event) { 
var returnValue = true; 
// grab the event object (IE uses a global event object) 
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); 
// get a reference to the hash table of event handlers 
var handlers = this.events[event.type]; 
// execute each event handler 
for (var i in handlers) { 
this.$$handleEvent = handlers[i]; 
if (this.$$handleEvent(event) === false) { 
returnValue = false; 
} 
} 
return returnValue; 
}; 

function fixEvent(event) { 
// add W3C standard event methods 
event.preventDefault = fixEvent.preventDefault; 
event.stopPropagation = fixEvent.stopPropagation; 
return event; 
}; 
fixEvent.preventDefault = function() { 
this.returnValue = false; 
}; 
fixEvent.stopPropagation = function() { 
this.cancelBubble = true; 
}; 
function tableAddEvent(){ 

}; 

return{ 
add:addEvent, 
remove:removeEvent, 
$:getByid 
} 
}(); 

var outEleObj = EventUtil.$("outEle"); 
//addEvent.apply(EventUtil,[outEleObj,"click",eventfun3]); 
//EventUtil.add(outEleObj,"click",eventfun3); 
var inputObj = EventUtil.$("button4"); 
var tableEle = EventUtil.$("htmlEleTable"); 
var tabTrEle = tableEle.getElementsByTagName("tr"); 
EventUtil.add(tableEle,"click",eventfun3); 
for (i=0; i<tabTrEle.length; i++){ 
EventUtil.add(tabTrEle[i],"click",eventfun3); 
} 
EventUtil.remove(tableEle,"click",eventfun3);//事件冒删除方法 
EventUtil.add(tableEle,"click",eventfun3);//事件冒泡添加方法 
//EventUtil.add(inputObj,"click",eventfun3); 
//EventUtil.remove(outEleObj,"click",eventfun3); 
//console.log(addEvent); 
//addEvent(inputObj,"click",eventfun3,true); 
//delEvent(outEleObj,"click",eventfun3,false); 
</script> 
</body> 
</html>