Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang cara menambah dan memadam pendengar menggunakan kemahiran Javascript_javascript

Penjelasan terperinci tentang cara menambah dan memadam pendengar menggunakan kemahiran Javascript_javascript

WBOY
Lepaskan: 2016-05-16 16:25:40
asal
1736 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan Javascript untuk menambah dan memadam pendengar. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Pemantauan acara dalam js ialah menggunakan addEventListener untuk mengikat acara Penggunaan ini sangat biasa dan mudah dalam jquery, tetapi ia lebih rumit dalam js asli Berikut ialah ujian dan contoh setiap kaedah acara addEventListener untuk anda rujukan dan kajian.

Semasa saya bekerja pada pemain dua hari yang lalu, saya menghadapi sedikit masalah selepas menambah dan memadamkan monitor Saya tidak dapat memadamkannya adakah surat-menyurat lengkap bermakna?

Salin kod Kod adalah seperti berikut:
$('.video')[0].addEventListener('timeupdate ', currentTimeHandler , benar);
Sebagai contoh, dalam ayat ini, tiga parameter perlu dilalui supaya ia boleh dipadamkan. Mengapa ia perlu seperti ini Apabila menambah dan mengalih keluar, parameter ketiga tidak perlu ditulis, tetapi syarat lalainya berbeza pada masa ini! !

Biasanya addEventListener adalah palsu...

1. Tambahkan pendengar acara tersuai

Salin kod Kod adalah seperti berikut: var eventHandlesCounter=1;//Hitung bilangan acara pendengar menambah, 0 sebagai bit terpelihara
Fungsi addEvent(obj,evt,fn){
If(!fn.__EventID){ fn.__EventID=eventHandlesCounter;}
If(!obj.__EventHandles){ obj.__EventHandles=[]; Jika(!obj.__EventHandles[evt]){
              obj.__EventHandles[evt]=[];
If(obj["on" evt] instanceof Function){
                obj.__EventHandles[evt][0]=obj["on" evt];
                 obj["on" evt]=handleEvents;
           }
}
        obj.__EventHandles[evt][fn.__EventID]=fn;

        fungsi handleEvents(){
        var fns = obj.__EventHandles[evt];
untuk (var i=0;i                   fns[i].panggil(ini);
}
}


2. Sesuaikan pemantauan acara pemadaman


Salin kod Kod adalah seperti berikut:function delEvent(obj,evt,fn){ If(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
Kembalikan palsu;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
Padam obj.__EventHandles[evt][fn.__EventID];
}
}


3. Ubah suai kaedah di atas


Salin kod Kod adalah seperti berikut:
fungsi addEvent(obj,evt,fn,useCapture){
    if(obj.addEventListener){//优先使用W3C事件注册
       obj.addEventListener(evt,fn,!!useCapture);
    }lain{
       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 || tingkap.acara;
    var fns = this.__EventHandles[evt.type];
    untuk (var i=0;i        if(fns[i] instanceof Function){
           fns[i].panggil(ini);
       }
    }
};
fungsi delEvent(obj,evt,fn,useCapture){
   if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数         
       obj.removeEventListener(evt,fn,!!useCapture);
   }lain {
      if(obj.__EventHandles){
         var fns = obj.__EventHandles[evt];
         if(fns){delete fns[fn.__EventID];}
      }
}

4、标准化事件对象
复制代码 代码如下:
function fixEvent(evt){
   jika(!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")?evt.keyCode:0;
      evt.eventPhase = 2;
      evt.timeStamp = (Tarikh baharu()).getTime();
   }
pulangkan evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fixEvent函数不是单独执行的,它必须有一个事件对象参数,而且只有事件必须有一个事件对象参数,而且只有事件只有事件发发生!的方法是把它整合到addEvent函数的execEventHandles里面。

复制代码 代码如下:
addEvent.execEventHandles = fungsi (evt)数并执行
jika (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在这里对其进行标准化操作
var fns = this.__EventHandles[evt.type];
untuk (var i=0;i< fns.length;i ) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数
//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };
><🎜

上面是高手写了,下面整理几个实际的监听事情的例子


复制代码 代码如下:



test6.html








Hier wird document.getElementById("1").attachEvent("onclick",test); für die dynamische Ereignisbindung verwendet und
zum Kopieren des Codes Der Code lautet wie folgt:

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
Code kopieren Der Code lautet wie folgt:



test7.html




Bitte geben Sie eine Zahl ein


Das Ereignis hier ist ein Ereignisobjekt, das viele Informationen zurückgeben kann. Einzelheiten finden Sie in den entsprechenden Dokumenten.

Ergänzung: Kompatibilität bei der Ereignisüberwachung

1. IE verwendet die Methode attachmentEvent/detachEvent, um Ereignis-Listener hinzuzufügen und zu entfernen; w3c verwendet die Methode addEventListener/removeEventListener.
2. IE verwendet für seine Ereignisse die Onevent-Benennungsmethode, während w3c die Ereignis-Benennungsmethode verwendet.
3. Der IE-Ereignis-Listener verwendet ein globales Ereignisobjekt, während w3c das Ereignisobjekt als Parameter an den Listener übergibt.
4. Um das Auslösen des Standardereignisverhaltens zu vermeiden, verlangt IE von Programmierern, den Attributwert returnValue im Event-Objekt auf false zu setzen, während der Ansatz von w3c darin besteht, die Methode PreventDefault auszuführen.
5. IE bietet keine Unterstützung für die Ereigniserfassungsphase.
6. Um die Ereigniszustellung zu stoppen, besteht der Ansatz von IE darin, die cancelBubble des Ereignisobjekts auf true zu setzen, während der Ansatz von w3c darin besteht, die Methode stopPropagation festzulegen und auszuführen.
7. IE ruft den Ereignis-Listener als unabhängige Funktion auf, aber in w3c wird er als Methode des Objekts aufgerufen. Dies bedeutet, dass das Schlüsselwort this im Ereignis-Listener im IE nicht auf das Ereignisobjekt, sondern auf ein nutzloses globales Objekt verweist Objekt (Fensterobjekt).
8. IE hat ein Speicherverlustproblem bei der Verwendung von Ereignis-Listenern. Wenn Sie im IE-Browser einen Ereignis-Listener für ein Element erstellen und das Element im Listener verwenden möchten, wird der vom Listener und den zugehörigen DOM-Knoten belegte Speicherplatz nicht belegt, bevor der Benutzer andere Seiten betritt.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan