Das Beispiel in diesem Artikel beschreibt die Verwendung von Javascript zum Hinzufügen und Löschen von Listenern. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Bei der Ereignisüberwachung in js wird addEventListener verwendet, um ein Ereignis zu binden. Diese Verwendung ist in jquery sehr verbreitet und einfach, in nativem js ist sie jedoch komplizierter. Hier sind die Tests und Beispiele für jede Methode des addEventListener-Ereignisses Referenz.
Als ich vor zwei Tagen an dem Player arbeitete, stieß ich auf ein kleines Problem, nachdem ich ihn hinzugefügt und gelöscht hatte. Nachdem ich ihn mir angesehen hatte, stellte ich fest, dass die Parameter vollständig übereinstimmen mussten bedeutet vollständige Übereinstimmung? Mit anderen Worten:
$('.video')[0].addEventListener('timeupdate ', currentTimeHandler , true);
In diesem Satz müssen beispielsweise drei Parameter übergeben werden, damit er gelöscht werden kann. Ja, der schmerzhafte Teil ist hier:
Beim Hinzufügen und Entfernen muss der dritte Parameter nicht geschrieben werden, aber die Standardbedingungen sind zu diesem Zeitpunkt unterschiedlich! !
Normalerweise ist addEventListener falsch...
1. Benutzerdefinierten Ereignis-Listener hinzufügen
var eventHandlesCounter=1;//Zähle die Anzahl der Ereignisse Zuhörer hinzugefügt, 0 als reserviertes Bit
Funktion addEvent(obj,evt,fn){
If(!fn.__EventID){ fn.__EventID=eventHandlesCounter;}
If(!obj.__EventHandles){ obj.__EventHandles=[];
If(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
If(obj["on" evt] Instanz der Funktion){
obj.__EventHandles[evt][0]=obj["on" evt];
obj["on" evt]=handleEvents;
}
}
obj.__EventHandles[evt][fn.__EventID]=fn;
Funktion handleEvents(){
var fns = obj.__EventHandles[evt];
für (var i=0;i
fns[i].call(this);
}
}
2. Passen Sie die Löschereignisüberwachung an
function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
Gibt false zurück;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
Löschen Sie obj.__EventHandles[evt][fn.__EventID];
}
}
3. Ändern Sie die obige Methode
Code kopieren Der Code lautet wie folgt:Funktion addEvent(obj,evt,fn,useCapture){
if(obj.addEventListener){//优先使用W3C事件注册
obj.addEventListener(evt,fn,!!useCapture);
}else{
if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter ;}
if(!obj.__EventHandles){ obj.__EventHandles=[];}
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on" evt]){
(obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;
}
obj["on" evtype]=addEvent.execEventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
für (var i=0;i
if(fns[i] Instanz der Funktion){
fns[i].call(this);
}
}
};
Funktion delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数
obj.removeEventListener(evt,fn,!!useCapture);
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){delete fns[fn.__EventID];}
}
}
4、标准化事件对象
function fixEvent(evt){
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if(evt.type == "mouseover"){
evt.latedTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.latedTarget = evt.toElement;
}
evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最Fügen Sie die Funktion „addEvent“ hinzu und verwenden Sie „execEventHandles“.
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在这里对其进行标准化操作
var fns = this.__EventHandles[evt.type];
für (var i=0;i< fns.length;i ) {
if (fns[i] Instanz der Funktion) {
fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数
//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };
上面是高手写了，下面整理几个实际的监听事情的例子
Hier wird document.getElementById("1").attachEvent("onclick",test); für die dynamische Ereignisbindung verwendet und
document.getElementById("1").detachEvent("onclick",test)
Brechen Sie die dynamische Zeit ab, sodass auf dieses Ereignis nur einmal reagiert werden kann und beim nächsten Mal nicht erneut auf die Schaltfläche geklickt wird Welche Auswirkung hat es? produzieren.
Nachfolgend finden Sie eine weitere Demonstration der jederzeitigen Überwachung von Tastaturereignissen, um festzustellen, ob es sich bei der Eingabe um eine Zahl handelt. Wenn es sich nicht um eine Zahl handelt, erfolgt eine dynamische Eingabeaufforderung und die anschließende Ablehnung der Eingabe
