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?
$('.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
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);//并且将其作为事件处理函数的第一个参数
//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };
><🎜
上面是高手写了，下面整理几个实际的监听事情的例子
