什么是JavaScript事件流及事件处理程序详解
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式，支持页面的行为与页面的外观之间的松散耦合。
事件流
事件流描述的是从页面中接受事件的顺序。
事件冒泡
事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的结点(文档)。以下面HTML页面为例，如果你点击了页面中的按钮，那么”click”事件会按照< button>、< body>、< html>、document的顺序传播。换句话说，事件冒泡指的就是事件从底层触发事件的元素开始沿着DOM树向上传播，直到document对象。
<html> <head> <title>Test</title> </head> <body> <button id="myBtn">A Btn</button> </body> </html>
事件捕获
与事件冒泡的思路相反，事件捕获的思想是不太具体的节点应该更早地接收到事件，最具体的结点应该最后才接收事件。同样还是上面那个例子，点击页面中的按钮之后，”click”事件会按照document、< html>、< body>、< button>的顺序传播。换句话说，事件捕获就是指事件从document对象开始沿着DOM树向下传播，直到事件的实际目标元素。
DOM事件流
“DOM2级事件”规定的事件包括三个阶段: 事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
还是以之前的点击按钮为例，在DOM事件流中，捕获阶段，”click”事件从document开始向下传递到body元素(注意，实际目标button在捕获阶段不会接收到事件)。目标阶段，button元素接收到”click”事件。最后，冒泡阶段，事件又被传播回文档。
事件处理程序
事件是用户或浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序或事件侦听器。
HTML事件处理程序
这里的HTML事件处理程序指的是直接在HTML元素里面通过特性(attribute)定义的事件处理程序，请看下面的代码示例。这样是定的事件处理程序会创建一个封装着元素属性值的函数，this值等于事件的目标元素。通过这种方法指定事件处理程序存在不少缺点，不推荐使用。
<button onclick="alert('HaHa~')">Btn-1</button>
<button onclick="alert('event.type')">Btn-2</button>
<button onclick="handler()">Btn-3</button>
<script type="text/javascript">
function handler() {
alert("Haha~");
}
</script>DOM0级事件处理程序
通过JS指定事件处理程序的传统方式就是将一个函数赋值给一个事件处理程序属性，请看下面代码示例。通过这种方式指定的事件处理程序是在元素的作用域中运行，this引用的是当前元素。这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。若要删除事件，直接令onclick的值为空即可。
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log("this.id"); // "myBtn"
};
// 删除事件处理程序
btn.onclick = null;DOM2级事件处理程序
“DOM2级事件”定义了两个方法用于指定和删除事件处理程序，addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法。这两个方法都接收3个参数，要处理的事件、处理函数、布尔值。最后的布尔值为true时表示在捕获阶段调用事件处理程序，为false时表示在冒泡阶段调用处理程序。与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。DOM2级方法添加事件处理程序的优势是可以添加多个事件处理程序。这些事件处理程序会按照它们被添加的顺序触发。下面是代码示例：
var btn = document.getElementById("myBtn");
// 添加，触发点击事件时先输出"myBtn"再输出"HaHa~"
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.addEventListener("click", function() {
console.log("HaHa~");
}, false);通过addEventListener()添加的事件只能通过removeEventListener()来删除。删除时传入的参数与添加时使用的参数应该保持一致。这也意味着通过addEventListener()添加的匿名函数将无法删除，因为无法将添加时传递的匿名函数传给removeEventListener()，即便在删除的时候写了一个一模一样的函数，但此时这个函数只是一个新的匿名函数。请看下面代码示例：
var btn = document.getElementById("myBtn");
// 无法删除匿名函数
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.removeEventListener("click", function() {
console.log(this.id);
}, false);
// 正确的添加和删除方式
function handler() {
console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候才将事件处理程序添加到捕获阶段。JS高级程序设计上给出的建议是，如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。
IE事件处理程序
IE实现了与DOM中类似的两个方法: attachEvent()和deleteEvent()。这两个方法接收两个参数，事件处理程序名称和事件处理程序。注意，第一个参数是事件处理程序名称而不是事件名称，也就是说在注册点击事件的处理程序时应该传入”onclick”而不是”click”，这里跟DOM的方法有些差别。另外，这两个方法注册的事件处理程序是在全局作用域中运行而不是元素作用域，this的值指向window。还有一点需要特别小心，通过attachEvent()方法也可以添加多个事件处理程序，但是它们的执行顺序却不是按照它们被添加的顺序，而是完全相反，跟DOM方法截然不同。突然觉得IE真的特别反人类~~~下面是代码示例：
var btn = document.getElementById("myBtn");
function handler1() { // ... }
function handler2() { // ... }
// 添加，触发点击事件时先执行handler2再执行handler1
btn.attachEvent("onclick", handler1);
btn.attachEvent("onclick", handler2);
// 删除
btn.deleteEvent("onclick", handler1);
btn.deleteEvent("onclick", handler2);Atas ialah kandungan terperinci 什么是JavaScript事件流及事件处理程序详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Proses operasi hos perkhidmatan WIN10 yang menduduki terlalu banyak CPU
Mar 27, 2024 pm 02:41 PM
1. Mula-mula, kita klik kanan ruang kosong bar tugas dan pilih pilihan [Task Manager], atau klik kanan logo mula, dan kemudian pilih pilihan [Task Manager]. 2. Dalam antara muka Pengurus Tugas yang dibuka, kami klik tab [Perkhidmatan] di hujung kanan. 3. Dalam tab [Perkhidmatan] yang dibuka, klik pilihan [Buka Perkhidmatan] di bawah. 4. Dalam tetingkap [Services] yang terbuka, klik kanan perkhidmatan [InternetConnectionSharing(ICS)], dan kemudian pilih pilihan [Properties]. 5. Dalam tetingkap sifat yang terbuka, tukar [Buka dengan] kepada [Disabled], klik [Apply] dan kemudian klik [OK]. 6. Klik logo mula, kemudian klik butang tutup, pilih [Mulakan Semula], dan selesaikan mula semula komputer.
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Panduan ringkas untuk manipulasi fail CSV
Dec 26, 2023 pm 02:23 PM
Ketahui cara membuka dan memproses fail format CSV dengan pantas Dengan pembangunan analisis dan pemprosesan data yang berterusan, format CSV telah menjadi salah satu format fail yang digunakan secara meluas. Fail CSV ialah fail teks yang ringkas dan mudah dibaca dengan medan data berbeza yang dipisahkan dengan koma. Sama ada dalam penyelidikan akademik, analisis perniagaan atau pemprosesan data, kami sering menghadapi situasi di mana kami perlu membuka dan memproses fail CSV. Panduan berikut akan menunjukkan kepada anda cara belajar membuka dan memproses fail format CSV dengan cepat. Langkah 1: Fahami format fail CSV Pertama,
Ketahui cara mengendalikan aksara khas dan menukar petikan tunggal dalam PHP
Mar 27, 2024 pm 12:39 PM
Dalam proses pembangunan PHP, berurusan dengan aksara khas adalah masalah biasa, terutamanya dalam pemprosesan rentetan, aksara khas sering terlepas. Antaranya, menukar aksara khas kepada petikan tunggal adalah keperluan yang agak biasa, kerana dalam PHP, petikan tunggal adalah cara biasa untuk membungkus rentetan. Dalam artikel ini, kami akan menerangkan cara mengendalikan petikan tunggal penukaran aksara khas dalam PHP dan memberikan contoh kod khusus. Dalam PHP, aksara khas termasuk tetapi tidak terhad kepada petikan tunggal ('), petikan berganda ("), segaris ke belakang (), dsb. Dalam rentetan
Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok
Dec 18, 2023 pm 03:39 PM
Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun
Bagaimana untuk menyelesaikan masalah selepas peningkatan dari win7 ke win10 gagal?
Dec 26, 2023 pm 07:49 PM
Jika sistem operasi yang kami gunakan ialah win7, sesetengah rakan mungkin gagal untuk menaik taraf daripada win7 kepada win10 semasa menaik taraf. Editor berpendapat kita boleh cuba menaik taraf sekali lagi untuk melihat sama ada ia dapat menyelesaikan masalah. Mari kita lihat apa yang editor lakukan untuk perincian~ Apa yang perlu dilakukan jika win7 gagal untuk menaik taraf kepada win10 Kaedah 1: 1. Adalah disyorkan untuk memuat turun pemacu terlebih dahulu untuk menilai sama ada komputer anda boleh dinaik taraf kepada Win10. Kemudian gunakan ujian pemandu selepas menaik taraf Periksa jika terdapat sebarang keabnormalan pemandu, dan kemudian membaikinya dengan satu klik. Kaedah 2: 1. Padam semua fail di bawah C:\Windows\SoftwareDistribution\Download. 2.win+R run "wuauclt.e
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Hubungan antara js dan vue
Mar 11, 2024 pm 05:21 PM
Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.
