JS_事件
0. 什麼是事件
簡單來說就是行為,比如點擊圖片查看下一張,點擊按鈕發送消息這些都可以是事件.
1. 事件的使用:
想要使用事件一共分為三步:
- 事件源: 確定事件是由哪一個元素引發的, 又有哪一些元素需要改變--引發後續事件的標籤和需要被改變的標籤
- 事件: 觸發事件的原因--比如鼠標點擊,鼠標移入等等
- 事件驅動程序: 事件被觸發之後需要做的事情
2. 舉例說明:
假設我們現在有下面這樣一段HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的使用方法示例</title> <style> #box { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div id="box"></div> </body> </html>
這是一段非常簡單的代碼,只有一個粉色的方塊:
而我們要做的事情就是--當我們點擊這個盒子的時候希望其變大,同時顏色變為黑色.
第一步: 確定事件源:
後面的變化是由誰引起?--這個粉色的盒子;
需要發生變化的是誰?--也是這個粉色的盒子;
所以很簡單的知道這個粉色的盒子本身就是事件源
既然已經確定粉色盒子就是事件源,那麼我們如何使用代碼表示呢?
// 獲取事件源
var box = document.getElementById("box");
解釋:
每一個載入瀏覽器的HTML的文檔都會稱為document對象,而document對象使我們能夠對HTML中的所有元素進行訪問.你可以認為document指的就是整個HTML文檔,然後我們通過不同的方法找出我們需要的元素標籤.[注釋: 除了document的對象js還有很多其他的對象,我們會在其他的文章中說明]
而在這裡我們通過的是使用標籤的id,因此調用getElementById()方法獲取到這個盒子,除了這個也還有其他方法,後面都會講到.
既然已經獲取到了,是不是就結束了呢?不是的.因為這種方法就相當於再說: 我知道他是誰,他就是三年級二班的小明.這當然沒有錯,但是以後每次說到小明你都要說三年級二班的小明是不是很麻煩呢?所以我們使用一個變量box去盛裝方便後續的操作
第二步: 綁定事件:
事件已經找到了,現在我們對他進行綁定事件-->觸發改變的條件-->點擊盒子.使用代碼表示就是:
box.onclick = function() {
//驅動事件程序內容
}
解釋:
觸發的條件是鼠標點擊,所以使用onclick(如果是滑鼠滑入這是onmouseover, 滑鼠滑出為onmouseout)這些事件都是已經定義好的,如果你想查看等多的事件可是再編輯器中使用"div."然後就會彈出許多待選的事件,你也可以在W3school的HTML DOM Event 对象或者菜鳥教程的: HTML DOM 事件查看.
後面的的是固定格式: 對象.事件 = function(){事件驅動程序}
第三步: 事件驅動程序
我們需要做的事情是就是讓原來的盒子變大.也就是將其寬(width),高(height)變大,然後將其顏色改變為黑色(black).
所以可以直接在驅動程序事件內容中寫:
box2.style.width = "200px";
box2.style.height = "200px";
box2.style.backgroundColor = "red";
這個時候點擊是不是發現沒有任何變化?因為在#box中添加一行:cursor: pointer;然後刷新點擊發現是不是變了/
最後完整的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取事件源 var box = document.getElementById("box"); // console.log(box); // 綁定事件 格式: 事件源.事件=function(){事件驅動程序} box.onclick = function() { box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor = "black"; } </script> </html>
3. 三種事件綁定方式:
1. 常規綁定方式:
也就是上面示例使用的方式.事件源-事件-事件驅動程序.這裡對此不在贅述
2. 添加類名:
我們把需要改變的動作寫成樣式(CS),放在<style></style>標籤當中,當事件觸發之後將class賦值為我們自己編寫的樣式類名:
示例:
1. 首先添加點擊之後的樣式:
1 2 3 4 5 6 7 8 9 10 | <style> .click-after { // 被點擊之後的樣式 width: 200px; height: 200px; background-color: black; }</style> |
2. 事件: 事件和之前沒有任何區別,依舊固定格式:
box.onclick = function() {
//驅動事件程序內容
}
3. 更改類名:
box.onclick = function() {
box.className = "click-after";
};
你會發現效果和之前完全一樣,但是代碼稍微簡潔一點點.
3. 在標籤內添加onclick="fn()"
1. 在標籤內部添加事件函數
<div onclick="fn()"></div>
2. 在script></script>標籤內部添加函數動作:
function fn() {
width: 200px;
height: 200px;
background-color: black;
}
4. 通過標籤名和類名獲取事件源:
在眾多獲取事件源的方法中最常用的就是: 1. 通過ID獲取, 2. 通過類名獲取, 3. 通過標籤名獲取.然而與ID不同的是同一個HTML中會有大量相同的標籤我們無法區分具體是哪一個標籤,而同一個標籤能夠擁有多個不同的類,不同的標籤能擁有相同的類.,也無法唯一確定.所以通過方法2,3獲取到的方法都是一個數組,要獲取到具體的某一個需要使用下標配合.
示例:
假設有這麼一段HTML(已經省略其他內容):
1. 通過id獲取第一個div標籤:
var box1 = document.getElementById("box1");
2. 通過類名獲取第二個div標籤:
var box2 = document.getElementsByClassName("box")[1];
或者和獲取id一樣的獲取方式,但是在使用的時候使用下標
var boxarr = document.getElementsByClassName("div");
// 獲取一個數組
boxarr[1].onclick = function() {
// 使用的時候加上下標
boxarr[1].style.width = "200px";
boxarr[1].style.height = "200px";
boxarr[1].style.backgroundColor = "blue";
};
3. 通過標籤獲取第三個div標籤:
其方法與通過類名獲取是一樣的,唯一的不同在於使用的方法名(函數名)不同:
var box3 = document.getElementsByTagName("box3")[0];
類名獲取的第二種方式,對於使用標籤名同樣適合
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· Windows编程----内核对象竟然如此简单？
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用