masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > JavaScript事件处理程序(事件侦听器)_javascript技巧

JavaScript事件处理程序(事件侦听器)_javascript技巧

WBOY

Lepaskan： 2016-05-16 18:03:49

asal

951 orang telah melayarinya

我们知道，javascript与HTML之间的交互是通过事件来实现的，事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。

<title>event util test</title> 
<script type="text/javascript"> 
var eventUtil = { 
addListener: function(element, type, hander) { 
if (element.addEventListener) { 
element.addEventListener(type, hander, false); 
} else if (element.attachEvent) { 
element.attachEvent('on' + type, hander); 
} else { 
element['on' + type] = hander; 
} 
}, 
getEvent: function(event) { 
return event || window.event; 
//return event ? event : window.event; 
}, 
getTarget: function(event) { 
return event.target || event.srcElement; 
}, 
preventDefault: function(event) { 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
} 
}, 
removeListener: function(element, type, hander) { 
if (element.removeEventListener) { 
element.removeEventListener(type, hander, false); 
} else if (element.deattachEvent) { 
element.detachEvent(type, hander); 
} else { 
element['on' + type] = null; 
} 
}, 
stopPropagation: function(event) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
} 
}; 
</script> 
 
 
<input type="button" value="click me" id="btn"> 
<a href="http://www.baidu.com">baidu</a> 
<script type="text/javascript"> 
(function() { 
var btn = document.getElementById("btn"); 
var link = document.getElementsByTagName("a")[0]; 
eventUtil.addListener(link, "click", function(event) { 
alert("prevent default event"); 
var event = eventUtil.getEvent(event); 
eventUtil.preventDefault(event); 
}); 
eventUtil.addListener(btn, "click", function(event) { 
var event = eventUtil.getEvent(event); 
var target = eventUtil.getTarget(event); 
alert(event.type); 
alert(target); 
eventUtil.stopPropagation(event); 
}); 
eventUtil.addListener(document.body, "click", function() { 
alert("click body"); 
}); 
})(); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

事件处理

sumber：php.cn

Artikel sebelumnya：关于hashchangebroker和statehashable的补充文档_jquery Artikel seterusnya：基于jQuery的前端数据通用验证库_jquery

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

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...

daripada 2024-04-06 19:54:23

0

1

444

Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...

daripada 2024-04-06 19:23:03

0

1

411

Apakah amalan terbaik untuk memaparkan maklumat versi dalam aplikasi web? Saya sedang membangunkan aplikasi web. Apakah amalan terbaik untuk memaparkan maklumat ver...

daripada 2024-04-06 19:13:16

0

2

476

Bandingkan Imagick, Adobe Photoshop dan Windows - Kesan resolusi (piksel per sentimeter atau piksel per inci) Ini bukan soalan tetapi percubaan untuk meningkatkan pemahaman saya tentang cara DPI disim...

daripada 2024-04-06 16:01:27

0

1

397

Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

daripada 2024-04-06 15:35:24

0

1

274

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan