viceen
于 2022-07-06 09:28:59 發(fā)布
756
收藏 3
分類專欄： html和css 文章標(biāo)簽： html javascript 前端
版權(quán)
html和css
專欄收錄該內(nèi)容
5 篇文章0 訂閱
訂閱專欄
HTML中的DOM事件——鼠標(biāo)事件、鍵盤事件、框架/對象事件、表單事件
1. 什么是事件
是通過用戶進(jìn)行觸發(fā)的一些行為。比如：點擊、雙擊、鍵盤按下抬起等等都稱為事件。
事件在觸發(fā)的時候會產(chǎn)生一個事件對象。
2.事件的添加方式
在標(biāo)簽內(nèi)添加事件名稱，并調(diào)用對應(yīng)的事件處理函數(shù)
<body>
<button id="box" onclick="a()">按鈕</button>
</body>
<script>
function a() {
console.log("點擊了");
}
</script>
通過獲取 DOM 對象，然后添加事件，并賦值的事件的處理函數(shù)。
<body>
<button id="box">按鈕</button>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
// 給元素添加事件
box.onclick = function (event) {
console.log("點擊了");
console.log(event);
};
</script>
通過監(jiān)聽的方式添加事件。
<body>
<button id="btn">按鈕</button>
</body>
<script>
var btn = document.getElementById("btn");
// 通過添加事件的監(jiān)聽
// 第一個參數(shù)是事件的類型
// 第二個參數(shù)是事件的處理函數(shù)
btn.addEventListener("click", function (event) {
console.log("點擊了");
console.log(event);
});
</script>
3. 鼠標(biāo)事件
3.1 單機(jī)事件 onclick
3.2 雙擊事件 ondblclick
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.ondblclick = function () {
console.log("雙擊了");
};
</script>
3.3 鼠標(biāo)按下事件 onmousedown
鼠標(biāo)在某一個元素中進(jìn)行按下操作時會觸發(fā)
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmousedown = function () {
console.log("鼠標(biāo)按下");
};
</script>
3.4 鼠標(biāo)抬起事件 onmouseup
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmouseup = function () {
console.log("鼠標(biāo)抬起");
};
</script>
3.5 鼠標(biāo)進(jìn)入事件 onmouseenter
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmouseenter = function () {
console.log("鼠標(biāo)進(jìn)入");
};
</script>
3.6 鼠標(biāo)離開事件 onmouseleave
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmouseleave = function () {
console.log("鼠標(biāo)離開");
};
</script>
3.7 鼠標(biāo)移動事件 onmousemove
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmousemove = function () {
console.log("鼠標(biāo)移動");
};
</script>
3.8 鼠標(biāo)移入 onmouseover
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmouseover = function () {
console.log("鼠標(biāo)移入");
};
</script>
3.9 鼠標(biāo)移除 onmouseout
<head>
<style>
#box {
width: 200px;
height: 200px;
background: palegreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
box.onmouseout = function () {
console.log("鼠標(biāo)移出");
};
</script>
4. 鍵盤事件
4.1 某個鍵盤按鍵被按下：onkeydown
<script>
document.body.onkeydown = function (event) {
console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼
console.log("鍵盤按下");
};
</script>
4.2 某個鍵盤按鍵被松開：onkeyup
<script>
document.body.onkeyup = function (event) {
console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼
console.log("鍵盤抬起");
};
</script>
4.3 某個鍵盤按鍵被按下并松開：onkeypress
<script>
document.body.onkeypress = function (event) {
console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼
console.log("鍵盤按下并抬起");
};
</script>
5. 框架/對象(Frame/Object) 事件
5.1 一張頁面或一幅圖像完成加載：onload
<head>
<script>
// 頁面加載事件 這個事件通過情況下綁定在 window
window.onload = function () {
foo();
var box = document.getElementById("box");
console.log(box);
};
function foo() {
console.log("foo");
}
</script>
</head>
<body>
<div id="box"></div>
</body>
5.2 當(dāng)文檔被滾動時發(fā)生的事件：onscroll
<head>
<style>
#box {
height: 3000px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
window.document.onscroll = function () {
console.log("滾動事件觸發(fā)了");
// 獲取文檔滾動的高度
var top = document.documentElement.scrollTop;
console.log(top);
};
</script>
5.3 窗口或框架被重新調(diào)整大?。簅nscroll
<script>
window.onresize = function () {
console.log("窗口大小變化了");
};
</script>
6. 表單事件
6.1 元素失去焦點時觸發(fā)：onblur
<body>
<form action="" method="get">
<p>
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onblur = function () {
console.log("失焦了");
};
</script>
6.2 該事件在表單元素改變時觸發(fā)：onchange
<body>
<form action="" method="get">
<p>
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onchange = function () {
// 當(dāng)你失焦了才能觸發(fā) 或者 回車
console.log("輸入了");
};
</script>
6.3 元素獲取焦點時觸發(fā)：onfocus
<body>
<form action="" method="get">
<p>
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.onfocus = function () {
console.log("獲取焦點");
};
</script>
6.4 元素獲取用戶輸入時觸發(fā)：oninput
<body>
<form action="" method="get">
<p>
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
var username = document.getElementById("username");
username.oninput = function () {
// 當(dāng)每輸入一個值的時候就觸發(fā)
console.log("oninput事件觸發(fā)了");
};
</script>
6.5 表單提交時觸發(fā)：onsubmit
<body>
<form id="form" action="" method="get" onsubmit="login()">
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
// 表單的處理函數(shù)
function login() {
alert("表單已經(jīng)提交了");
}
var form = document.getElementById("form");
form.onsubmit = function () {
alert("登陸");
// 組織表單的默認(rèn)行為 阻止一直刷新
// event.preventDefault();
return false
};
</script>
————————————————
版權(quán)聲明：本文為CSDN博主「viceen」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44867717/article/details/125632882
