简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

JavaSript事件冒泡和事件捕获如何实现

php中世界最好的语言
Lepaskan： 2018-03-19 14:29:26
asal
2250 orang telah melayarinya

这次给大家带来JavaSript事件冒泡和事件捕获如何实现 ，JavaSript事件冒泡和事件捕获实现的注意事项有哪些，下面就是实战案例，一起来看一下。

　　事件流描述的是从页面中接收事件的顺序。但当时，浏览器发展到第四代（IE4和Netscape Communicator4）时，IE和Netscape开发团队各自提出了事件流的概念，而且两个顺序流的概念差不多是相反的。如下：

　　1，事件冒泡：这是IE的事件流，事件冒泡是指：事件开始时，有最具体的元素接收（最具体是指文档中嵌套里面最深的元素），然后逐级地向上传播到不具体的节点（文档）。

　　2，事件捕获：这是Netscape 提出的事件流，前面说过，两个顺序几乎是相反的，所以事件捕获顺序是由最不具体的节点（文档）接收，逐级地传递到最深的元素上去。

来看一个例子：

<head> 

   Event Bubbling Example

 

 

Click Me

  

如果单击了如上的

元素：

对于事件冒泡来说：这个click事件传播顺序为：p ----> body ----> html ----> document

 

对于事件捕获来说：这个click事件传播顺序是：document ----> html ----> body ----> p

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Css float的盒子模型position

在前端中的html基础知识 

Atas ialah kandungan terperinci JavaSript事件冒泡和事件捕获如何实现 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
事件 捕获
sumber：php.cn
Artikel sebelumnya：Promise入门必知 Artikel seterusnya：event loop如何使用
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
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1732
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1889
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1601
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1512
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1549
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
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！