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
- WBOYasal
- 2016-05-16 16:25:401740semak imbas
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?
Biasanya addEventListener adalah palsu...
1. Tambahkan pendengar acara tersuai
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
}
}
2. Sesuaikan pemantauan acara pemadaman
if(obj.__EventHandles[evt][fn.__EventID]==fn){
Padam obj.__EventHandles[evt][fn.__EventID];
}
}
3. Ubah suai kaedah di atas
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
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、标准化事件对象
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里面。
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);//并且将其作为事件处理函数的第一个参数
//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };