viceen
于 2022-07-06 09:28:59 發布
756
收藏 3
分類專欄： html和css 文章標簽： html javascript 前端
版權
html和css
專欄收錄該內容
5 篇文章0 訂閱
訂閱專欄
HTML中的DOM事件——鼠標事件、鍵盤事件、框架/對象事件、表單事件
1. 什么是事件
是通過用戶進行觸發的一些行為。比如：點擊、雙擊、鍵盤按下抬起等等都稱為事件。
事件在觸發的時候會產生一個事件對象。
2.事件的添加方式
在標簽內添加事件名稱，并調用對應的事件處理函數
<body>
<button id="box" onclick="a()">按鈕</button>
</body>
<script>
function a() {
console.log("點擊了");
}
</script>
通過獲取 DOM 對象，然后添加事件，并賦值的事件的處理函數。
<body>
<button id="box">按鈕</button>
</body>
<script>
// 獲取DOM對象
var box = document.getElementById("box");
// 給元素添加事件
box.onclick = function (event) {
console.log("點擊了");
console.log(event);
};
</script>
通過監聽的方式添加事件。
<body>
<button id="btn">按鈕</button>
</body>
<script>
var btn = document.getElementById("btn");
// 通過添加事件的監聽
// 第一個參數是事件的類型
// 第二個參數是事件的處理函數
btn.addEventListener("click", function (event) {
console.log("點擊了");
console.log(event);
});
</script>
3. 鼠標事件
3.1 單機事件 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 鼠標按下事件 onmousedown
鼠標在某一個元素中進行按下操作時會觸發
<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("鼠標按下");
};
</script>
3.4 鼠標抬起事件 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("鼠標抬起");
};
</script>
3.5 鼠標進入事件 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("鼠標進入");
};
</script>
3.6 鼠標離開事件 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("鼠標離開");
};
</script>
3.7 鼠標移動事件 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("鼠標移動");
};
</script>
3.8 鼠標移入 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("鼠標移入");
};
</script>
3.9 鼠標移除 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("鼠標移出");
};
</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 當文檔被滾動時發生的事件：onscroll
<head>
<style>
#box {
height: 3000px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
window.document.onscroll = function () {
console.log("滾動事件觸發了");
// 獲取文檔滾動的高度
var top = document.documentElement.scrollTop;
console.log(top);
};
</script>
5.3 窗口或框架被重新調整大小：onscroll
<script>
window.onresize = function () {
console.log("窗口大小變化了");
};
</script>
6. 表單事件
6.1 元素失去焦點時觸發：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 該事件在表單元素改變時觸發：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 () {
// 當你失焦了才能觸發 或者 回車
console.log("輸入了");
};
</script>
6.3 元素獲取焦點時觸發：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 元素獲取用戶輸入時觸發：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 () {
// 當每輸入一個值的時候就觸發
console.log("oninput事件觸發了");
};
</script>
6.5 表單提交時觸發：onsubmit
<body>
<form id="form" action="" method="get" onsubmit="login()">
用戶名：
<input type="text" id="username" />
</p>
<input type="submit" value="提交" />
</form>
</body>
<script>
// 表單的處理函數
function login() {
alert("表單已經提交了");
}
var form = document.getElementById("form");
form.onsubmit = function () {
alert("登陸");
// 組織表單的默認行為 阻止一直刷新
// event.preventDefault();
return false
};
</script>
————————————————
版權聲明：本文為CSDN博主「viceen」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44867717/article/details/125632882
