mata pelajaran yang mengikat peristiwa JavaScript_pengetahuan asas

Pengikatan acara terbahagi kepada dua jenis: satu pengikatan acara tradisional (model sebaris, model skrip) dan satu lagi pengikatan acara moden (model peringkat DOM2). Pengikatan acara moden menyediakan fungsi yang lebih berkuasa dan mudah berbanding pengikatan tradisional.

1 Masalah dengan pengikatan acara tradisional

Model sebaris dalam pengikatan acara tradisional tidak akan dibincangkan dan jarang digunakan. Mari kita lihat model skrip dahulu Model skrip memberikan fungsi kepada fungsi pengendalian acara. Ikatan tradisional seperti:

window.onload=function(){
 var box=document.getElementById('box');
 box.onclick = function(){
  alert('Lee');
 };
};

Masalah 1: Fungsi pengendalian acara mencetuskan dua acara

Jika halaman mempunyai dua atau lebih js, dan js pertama dibangunkan oleh pengaturcara pertama, js kedua dibangunkan oleh pengaturcara kedua. Tetingkap pertama.onload ditimpa, seperti

window.onload=function(){
 alert('Lee');
};

window.onload=function(){
 alert('Mr.lee');
} 

Hasilnya baru sahaja mencetak Mr.lee

Sebenarnya, ada cara untuk menyelesaikan masalah ini. Lihatlah dua bentuk berikut.
a:

alert(window.onload);//一开始没有注册window.onload,那么就是null

window.onload=function(){
 alert('Lee');
};

alert(window.onload);//如果已经有window.onload,打印的是函数function

window.onload=function(){
 alert('Mr.lee');
} 

b:

alert(typeof window.onload);//一开始没有window.onolad,旧版火狐显示undefined,新版显示object,

window.onload=function(){
 alert('Lee');
};

alert(typeof window.onload);//如果已经有window.onload,所有浏览器都会显示function

window.onload=function(){
 alert('Mr.lee');
}

Jadi ada penyelesaiannya.

 window.onload=function(){
 alert('Lee');
};

if(typeof window.onload=='function'){
 var saved=null;//保存上一个事件对象
 saved=window.onload;
}

//saved 就是window.onload,saved()相当于window.onload(),但是window.onload()不能执行的
//所以saved()相当于window.onload=function(){}

window.onload=function(){
 if(saved){
  saved();//执行上一个事件 window.onload=function(){}
 }
 alert('Mr.lee'); //执行本事件
}

Soalan 2: Penukar Acara
Tukar div dengan ID kotak, biarkan latar belakang merah dan biru di dalam bertukar terus dan muncul kotak sekali sebelum bertukar, seperti:

window.onload=function(){
 var box=document.getElementById('box');
 box.className="red";
 box.onclick=function(){
  alert('Lee'); //只执行了一次
  blue.call(this);//通过匿名函数执行某一函数，那么里面的this就是代表的window,所以可以通过call传递
 };
}

function blue(){
 this.className="blue";
 this.onclick=red;
 
}

function red(){
 this.className="red";
 this.onclick=blue;
}

Walaupun kod di atas melaksanakan fungsi pensuisan, kotak pop timbul hanya dilaksanakan sekali.

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addEvent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}
addEvent(window,'load',function(){
 var box=document.getElementById("box");
 //addEvent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addEvent(box,'click',blue);
});

function red(){
 this.className="red";
 addEvent(box,'click',blue);
}

function blue(){
 this.className="blue";
 addEvent(box,'click',red);
}

//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉

Mengikut kod di atas, ralat berlaku dalam ulasan

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addEvent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}


//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉


//移除事件函数
function removeEvent(obj,type){
 if(obj['on'+type]){
  obj['on'+type]=null;
 }
}


addEvent(window,'load',function(){
 var box=document.getElementById("box");
 //addEvent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addEvent(box,'click',blue);
});

function red(){
 this.className="red";
 removeEvent(this,'click');
 addEvent(box,'click',blue);
}

function blue(){
 this.className="blue";
 removeEvent(this,'click');
 addEvent(box,'click',red);
}

Dua fungsi pengendalian acara W3C

addEventListener() dan removeEventListener()
Terdapat dua fungsi pengendalian acara W3C, addEventListener() dan removeEventListener().

//W3C disertakan dengan dua acara tambah dan acara pemadaman

1. Masalah liputan, selesai

window.addEventListener('load',function(){
 alert('Lee');
},false);

window.addEventListener('load',function(){
 alert('Mr.Lee');
},false);

window.addEventListener('load',function(){
 alert('Mrs.Lee');
},false);

2. Masalah menyekat fungsi yang sama diselesaikan

window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
function init(){
 alert('Lee');
}

3. Adakah mungkin untuk lulus ini dan menyelesaikannya

Contoh 1:

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',function(){
  alert(this);
 },false);
},false);

Contoh 2:

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',blue,false);
},false);

function red(){
 this.className="red";
 this.removeEventListener('click',red,false);
 this.addEventListener('click',blue,false);
}

function blue(){
 this.className="blue";
 this.removeEventListener('click',blue,false);
 this.addEventListener('click',red,false);
}

4. Tambah kaedah tambahan Adakah ia akan ditimpa atau hanya boleh dilaksanakan sekali

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',function(){
  alert('Lee');
 },false);
 box.addEventListener('click',blue,false);
},false);

Ringkasnya: W3C telah menyelesaikan masalah ini dengan sempurna dan sangat mudah digunakan Namun, IE8 dan penyemak imbas sebelumnya tidak menyokongnya, sebaliknya, mereka menggunakan acara mereka sendiri. Dua fungsi pengendalian acara.

W3C boleh menetapkan kaedah menggelegak dan menangkap.

Pelayar yang menyokong standard W3C menggunakan kaedah addEventListener(event,fn,useCapture) apabila menambahkan peristiwa Parameter ketiga useCapture dalam pangkalan ialah nilai Boolean, yang digunakan untuk menetapkan sama ada acara dilaksanakan semasa penangkapan peristiwa atau. apabila peristiwa itu berlaku. Penyemak imbas yang tidak serasi dengan W3C (IE) menggunakan kaedah attachEvent() Kaedah ini tidak mempunyai tetapan yang berkaitan Walau bagaimanapun, model acara IE dilaksanakan secara lalai apabila acara muncul, iaitu, apabila useCapture adalah sama dengan palsu. letakkannya adalah lebih selamat untuk menetapkan useCapture kepada false apabila mengendalikan acara, dan ia juga mencapai keserasian penyemak imbas.

Fasa tangkapan acara: Acara bermula dari label peringkat atas dan mencari ke bawah sehingga sasaran acara (sasaran) ditangkap.

Peringkat menggelegak acara: Acara bermula daripada sasaran acara (sasaran) dan menggelegak sehingga label peringkat atas halaman.
Penyebaran acara boleh dihentikan:
Dalam W3c, gunakan kaedah stopPropagation()
Tetapkan cancelBubble = benar di bawah IE;

3. IE fungsi pengendalian acara

attachEvent() dan detachEvent()

IE melaksanakan dua kaedah yang serupa dengan kaedah dalam DOM: attachEvent() dan detachEvent(). Kedua-dua kaedah menerima parameter yang sama: nama acara dan fungsi.

Apabila menggunakan dua set fungsi ini, mari kita bincangkan dahulu tentang perbezaan: 1. IE tidak menyokong penangkapan, hanya menggelegak 2. IE menambah acara tidak boleh menyekat fungsi pendua dan bukannya a objek DOM. 4. Dalam acara tradisional, IE tidak boleh menerima objek acara, tetapi menggunakan attchEvent boleh, tetapi terdapat beberapa perbezaan.

1. Masalah liputan selesai, tetapi ada perbezaannya ialah Mrs.Lee, Mr.Lee, dan akhirnya Lee

window.attachEvent('onload',function(){
 alert('Lee');
});

window.attachEvent('onload',function(){
 alert('Mr.Lee');
});
window.attachEvent('onload',function(){
 alert('Mrs.Lee');
});

2. Masalah menyekat fungsi yang sama belum selesai.

window.attachEvent('onload',init);
window.attachEvent('onload',init);

function init(){
 alert('Lee');
}

3. Bolehkah ini dilalui? Perlu menggunakan kaedah panggilan.

window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.attachEvent('onclick',function(){
  //alert(this===box);
  alert(this===window); //true
 });
});

Cara seterusnya ialah lulus window.event.srcElement. Kodnya adalah seperti berikut:

window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.attachEvent('onclick',blue);
});

function red(){
 var that=window.event.srcElement;
 that.className="red";
 that.detachEvent('onclick',red);
 that.attachEvent('onclick',blue);
}

function blue(){
 var that=window.event.srcElement;
 that.className="blue";
 that.detachEvent('onclick',blue);
 that.attachEvent('onclick',red);
}

4. Tambah kaedah tambahan Adakah ia akan ditimpa atau hanya boleh dilaksanakan sekali?

Dalam pengikatan tradisional, IE tidak boleh menerima objek acara melalui hantaran parameter seperti W3C, tetapi ia boleh dilakukan menggunakan attachEvent().

 window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.onclick=function(evt){ //传统方法IE无法通过参数获取evt
  alert(evt);//undefined
 }
 box.attachEvent('onclick',function(evt){
  alert(evt);//object
  alert(evt.type);//click
  alert(evt.srcElement.tagName);//DIV
  alert(window.event.srcElement.tagName);//DIV
 });
});

Keserasian merentas penyemak imbas

Acara merentas pelayar

function addEvent(obj,type,fn){
 if(obj.addEventListener){
  obj.addEventListener(type,fn,false);
 }else if(obj.attachEvent){
  obj.attachEvent('on'+type,fn);
 }
}

Acara penyingkiran merentas penyemak imbas

function removeEvent(obj,type,fn){
 if(obj.removeEventListener){
  obj.removeEventListener(type,fn,false);
 }else if(obj.detachEvent){
  obj.detachEvent('on'+type,fn);
 }
}

Dapatkan objek sasaran merentas penyemak imbas

调用方式：

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'click',blue);
});


function red(evt){
 var that=getTarget(evt);
 that.className="red";
 removeEvent(that,'click',red);
 addEvent(that,'click',blue);
}

function blue(evt){
 var that=getTarget(evt);
 that.className="blue";
 removeEvent(that,'click',blue);
 addEvent(that,'click',red);
}

四.事件对象的其他补充

relatedTarget事件

w3c中的一个relatedTarget事件。
例如：

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'mouseover',function(evt){
  alert(evt.relatedTarget); //得到移入box最近的那个DOM对象
 });
 
 addEvent(box,'mouseout',function(evt){
  alert(evt.relatedTarget); //从box移出最近的那个DOM对象
 });
});

IE提供了两组分别用于移入移出的属性fromElement和toElement,分别对应mouseover和mouseout。

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'mouseover',function(){
  alert(window.event.fromElement.tagName); //得到移入box最近的那个DOM对象
 });
 
 addEvent(box,'mouseout',function(){
  alert(window.event.toElement.tagName); //从box移出最近的那个DOM对象
 });
});

PS:fromElement和toElement如果分别对应相反的鼠标事件，没有任何意义。

剩下要做的就是跨浏览器兼容操作：

function getTarget(evt){
 var e=evt || window.event;
 if(e.srcElment){ //IE
  if(e.type=='mouseover'){
   return e.fromElement.tagName;
  }else if(e.type="mouseout"){
   return e.toElement.tagName;
  }
 }else if(e.relatedTarget){ //w3c
  return e.relatedTarget;
 }
}

屏蔽跳转操作

取消事件的默认行为有一种不规范的做法，就是返回false。

link.onclick=function(){
 alert('Lee');
 return false;
}

PS:虽然return false；可以实现这个功能，但是有漏洞。
第一：必须写到最后，这样导致中奖的代码执行后，有可能执行不到return false;
第二:return false 写到最前那么之后的自定义操作就失效了。
所以最好的办法应该是在最前面就阻止默认行为，并且后面的代码还可以执行。

link.onclick=function(evt){
 evt.preventDefault;//w3c,阻止默认行为
 alert('Lee');
}

link.onclick=function(evt){
 window.event.returnValue=false;//IE,阻止默认行为
 alert('Lee');
}

那么跨浏览器的兼容：

function preDef(evt){
 var e=evt || window.event;
 if(e.preventDefault){
  e.preventDefault();
 }else{
  e.returnValue=false;
 }
}

右键菜单contextmenu
兼容：

function preDef(evt){
 var e=evt || window.event;
 if(e.preventDefault){
  e.preventDefault();
 }else{
  e.returnValue=false;
 }
}

addEvent(window,"load",function(){
 var body=document.getElementsByTagName('body')[0];
 addEvent(body,'contextmenu',function(evt){
  preDef(evt);
 })
});

PS：contextmenu事件很常用，这直接导致浏览器兼容性较为稳定。

卸载前事件：beforeunload
这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。

addEvent(window,'beforeonload',function(){
 preDef(evt);
});

鼠标滚轮（mousewheel）和DOMMouseScroll
用于获取鼠标上下滚轮的距离

addEvent(document,'mousewheel',function(evt){ //非火狐
 alert(getWD(evt));
});

addEvent(document,'DOMMouseScroll',function(evt){ //火狐
 alert(getWD(evt));
});

function getWD(evt){
 var e=evt|| window.event;
 if(e.wheelDelta){
  return e.wheelDelta;
 }else if(e.detail){ //火狐
  return -evt.detail*30;
 }
}

PS：通过浏览器检测可以确定火狐只执行DOMMouseScroll。

DOMContentLoaded事件和readystatechange事件

DOMContentLoaded事件和readystatechange事件，有关DOM加载方面的事件。