Rumah > hujung hadapan web > tutorial js > Contoh analisis penggunaan attachEvent dalam kemahiran javascript_javascript

Contoh analisis penggunaan attachEvent dalam kemahiran javascript_javascript

WBOY
Lepaskan: 2016-05-16 15:59:02
asal
1173 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan attachEvent dalam javascript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Secara amnya kami menambah acara dalam JS seperti ini

obj.onclick=method

Kaedah mengikat acara ini serasi dengan penyemak imbas arus perdana, tetapi bagaimana jika acara yang sama ditambahkan beberapa kali pada elemen?

obj.onclick=method1
obj.onclick=method2
obj.onclick=method3
Salin selepas log masuk

Jika anda menulisnya seperti ini, maka hanya acara terikat terakhir, di sini kaedah 3, akan dilaksanakan Pada masa ini, kami tidak boleh menggunakan onclick Protagonis telah berubah

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
Salin selepas log masuk

Format didahului oleh jenis acara Ambil perhatian bahawa anda perlu menambah, seperti onclick, onsubmit, onchange

kaedah3->kaedah2->kaedah1

Malangnya, kaedah peribadi Microsoft ini tidak disokong oleh Firefox dan penyemak imbas lain Nasib baik, mereka semua menyokong kaedah addEventListener standard W3C

btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
Salin selepas log masuk

Arahan pelaksanaan ialah kaedah1->kaedah2->kaedah3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>
Salin selepas log masuk
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
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