在学习函数的时候会遇见很多的函数事件，本篇将对其进行详细的讲解。
什么是事件？
JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript）与页面的外观（HTML与CSS）之间的松散耦合。
事件流
事件流描述的是从页面中接受事件的顺序。假设如下代码：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<div id="div1"></div></body></html>点击div，这个点击不仅仅发生在div上，其父容器body也会被点击。那到底谁先被点击或者说事件是怎么传播的？事件流描述的就是这样一个接受事件的顺序。
IE事件流（事件冒泡）
IE事件流也叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层最深的那个节点）接收，然后逐级传播到较为不具体的节点（文档）。
以上面的代码为例，如果你点击了div元素，那么这个click事件会按如下顺序进行传播：
1.<div> 2.<body> 3.<html> 4.document
就是说，click事件首先发生在div元素上，而这个元素就是我们单击的元素，然后click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。
所有的现代浏览器都支持事件冒泡，但是有一些差别。IE5.5及更早版本中的事件冒泡会跳过html元素，从body直接到document。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。（旧IE浏览器只支持事件冒泡）。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而具体的节点应该最后接收到事件，正好与事件冒泡相反，再以上面的例子为例，点击div，事件捕获的事件触发顺序如下：
1.document 2.<html> 3.<body> 4.<div>
在事件捕获过程中，document对象首先接受到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标。
IE9，Firefox、Chrome、Safari和Opera都支持事件捕获。虽然DOM2级事件规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
DOM事件流
DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会。然后是实际的目标接受到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
在DOM事件流中，实际的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到html再到body就停止了。下一阶段是处于目标阶段，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件传回ducument。
但实际上，IE9，Firefox、Chrome、Safari和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。（IE8及更早版本不支持DOM事件流）。
事件处理程序
事件就是用户或浏览器自身执行的某种动作。像是click、load和mousover，都是事件的名字。响应某个事件的函数叫做事件处理程序（事件监听器）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，load事件的处理程序就是onload。有下面几种为事件指定处理程序的方法。
HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML属性来指定。这个属性的值应该是能够执行的JavaScript代码，示例：
<button id="myButton" onclick="alert('Clicked')">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；
在HTML中定义事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，示例：
<button id="myButton" onclick="showMsg()">Click Me</button> //点击按钮就会调用showMsg()函数；<script>
function showMsg() {
alert('Hello world!')
}</script>通过HTML指定事件处理程序有两个缺点：1.时差问题，因为用户可能会在HTML元素一出现页面就触发相应事件，但此时事件处理程序有可能尚不具备执行条件；2.HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动HTML代码和JavaScript代码。
DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每一个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，示例：
var btn = document.getElementById('myButton');
btn.onclick = function() {
alert("Clicked")
}使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：
btn.onclick = null; //删除事件处理程序； DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：
var btn = document.getElementById('myButton'); //为按钮添加了click事件和处理程序；
btn.addEventListener('click',function() {
alert(this.id)
}，false)与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：
var btn = document.getElementById('myButton'); //为按钮添加了多个click事件和处理程序；
btn.addEventListener('click',function() {
alert(this.id);
}，false); var btn = document.getElementById('myButton'); ；
btn.addEventListener('click',function() {
alert('hello world!');
}，false);这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：
//该代码无法运行；btn.removeEventListener('click',function() {
alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById('myButton');
var function handler() {
alert(this.id);
}
btn.addEventListener('click',handler,false);
btn.removeEventListener('click',handler,false);本篇对js事件进行了总结，更多相关内容请关注php中文网。
相关推荐：
Atas ialah kandungan terperinci 对于函数事件的总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AMPeralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AMEnjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AMJavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
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
Dreamweaver CS6
Alat pembangunan web visual
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
Dreamweaver Mac版
Alat pembangunan web visual
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
