当前位置：首页 > news >正文

JavaScript【6】事件

news 2025/5/18 9:12:37

1.概述：

在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。

它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面加载完成、元素获得或失去焦点等情况。这些事件可以被 JavaScript 代码捕获并进行相应的处理。

2.表单事件：

1.获取/失去焦点：onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onblur = function () {//失去焦点时this.style.backgroundColor = "green";}text.onfocus = function () {//获得焦点时this.style.backgroundColor = "red";}
</script></body>
</html>

默认输入框背景无填充色，只有触发下面事件才会将背景填充为对应颜色

点击输入框，此时获得焦点，触发获得焦点事件，将输入框背景改为红色

点击输入框以外的区域，此时失去焦点，触发失去焦点事件，将输入框背景改为绿色

2.节点内容改变：onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onchange = function () {//节点的内容改变时console.log(this.value)}
</script></body>
</html>

当输入1时，控制台输入1；

当删除输入框中的1后再重新输入1，发现控制台没有再次输出，说明此时没有触发该事件；

当输入框内的内容发送改变时，会再次触发该事件，并将输入值打印到控制台；

3.输入框有内容输入时：oninput

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.oninput = function () {//在用户输入时执行console.log(this.value)}
</script></body>
</html>

没有内容输入时，不触发该事件；

输入内容时，会将输入内容打印到控制台

当删除输入框内容时，会触发该事件，控制台打印空数据

当再次输入1时，再次触发该事件，控制台再次打印该数据

4.选取元素时：onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onselect = function () {console.log("选取元素时执行",this.value)}</script></body>
</html>

输入框输入内容时，不触发该事件

当选取输入内容时，触发该事件，将输入内容打印到控制台

5.提交时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return false;}*/</script></body>
</html>

此时返回值为false，点击提交按钮时不会触发提交事件，该表单不会被提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return true;}</script></body>
</html>

当返回值为true时，点击提交按钮会触发该事件，该表单会被提交（#表示提交到当前页面）

3.窗口事件：

1.获得/失去焦点时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onblur = function () {console.log('窗口失去了焦点')}window.onfocus = function () {console.log('窗口获得了焦点')}</script></body>
</html>

此时刚打开页面，不触发事件，所以控制台无输出

当点击左侧窗口区域时，触发获得焦点事件，控制台打印对应内容

当再次点击窗口外区域时，触发失去焦点事件，控制台再次打印对应内容

2.页面加载完成时：onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onload= function () {//当页面加载完成后执行console.log("页面加载完成")}</script></body>
</html>

 当使用低网速加载测试时，可以发现，不是一打开页面就会触发该事件，而是只有当整个页面加载出来后，才会触发该事件；

3.窗口大小改变时：onresize

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.onresize= function () {console.log("页面大小正在改变")}</script></body>
</html>

页面加载完成时，未触发事件

此时将窗口区域面积减小时，触发了该事件，并在控制台打印对应信息

4.键盘事件：

1.键盘按下时触发：onkeydown

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");//键盘按下时执行text.onkeydown = function (event) {// 解决兼容问题event = event || window.event;// key 按键//console.log("按下的键：", event.keyCode)console.log("按下的键：",event.key)}</script></body>
</html>

只要在键盘上按下按键，每按一次就会触发一次该事件，（如果长按则会重复触发），并将按键输出到控制台；

2.键盘弹起时触发：onkeyup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeyup = function (event) {console.log("按键弹起时：",event.key)}</script></body>
</html>

当长按1时，不会触发该事件，只有当松开时，会触发1次该事件

3.按下弹起时触发：onkeypress

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeypress = function (event) {console.log("按下弹起时：",event.key)}</script></body>
</html>

只有当按下并松开时才会触发该事件

4.案例：通过方向键控制色块移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;"></div>
<script>let box = document.getElementById("box");document.onkeydown = function (event) {let speed = 10;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";break;}}</script></body>
</html>

这是页面刚加载出来时色块的位置，此时我们可以通过方向键改变色块的位置

5.鼠标事件：

1.单击左键触发：onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onclick = function () {console.log("单击事件触发");}</script>
</body>
</html>

在元素区域（色块）内，单机鼠标左键，触发该事件

2.双击触发：ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.ondblclick = function () {console.log("双击事件触发");}</script>
</body>
</html>

双击元素区域，触发该事件

3.鼠标任意按键按下或松开时触发：onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousedown = function () {console.log("鼠标按钮按下时");}box.onmouseup = function () {console.log("鼠标按钮松开时");}</script>
</body>
</html>

在元素区域内按下或松开鼠标任意按键对会触发对应事件

4.鼠标指针移动时触发：onmousemove

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousemove = function () {console.log("鼠标指针移动时");}</script>
</body>
</html>

当鼠标指针在元素区域内移动时，就会重复触发该事件

5.鼠标指针移入或移出时触发：

不能阻止事件冒泡：onmouseover/onmouseout

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseover = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseout = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

可以阻止事件冒泡：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseenter = function () {// 能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseleave = function () {// 能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时，都会触发对应事件

6.鼠标滚轮滑动时触发：

1.有无内容都可触发（滑动滚轮）：onmousewheel

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");// 有没有内容都会触发/* box.onmousewheel = function () {console.log("鼠标的滚轮滚动时")}*/</script>
</body>
</html>

在元素区域内滑动鼠标滚轮，不管元素区域内有没有内容，都会触发该事件

2.必须有内容才会触发（滑动滚动条）：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内无内容，滑动鼠标滚轮不会触发该事件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内有内容，当我们滑动鼠标滚轮时会重复触发该事件

6.事件冒泡：

1.概述：

  事件冒泡 （Bubble）：是指事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；

2.示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")}
</script>
</body>
</html>

 在上面案例中，DIV2作为DIV1的子节点，当我们单击DIV2区域时，鼠标单击事件会向上传导到其父节点DIV1中，通过测试结果我们也可以看出当我们单击子节点div2时，不仅div2节点触发了该事件，其父节点div1节点也触发了该事件；

3.避免事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")stopBubble();}//取消事件的冒泡function stopBubble(event) {//处理浏览器兼容性问题if (event && event.stopPropagation) {event.stopPropagation()} else {window.event.cancelBubble = true;}}
</script>
</body>
</html>