JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
大拇指的约定 2024-08-02 16:05:04 阅读 82
一. HTML DOM 事件
什么是事件？
事件是在编译的过程中发生的事情，当事件发生的时候计算机可以自动采取某种行动（即运行一些代码，通常是我们所制定的函数）。常见的事件有：
单击事件双击事件鼠标划入鼠标划出鼠标悬停某个键盘被按下某个键盘被松开
1.1 鼠标事件
| onclick | 在对象被点击的时候发生 |
| ondblclick | 在对象被双击的时候发生 |
| onmousedown | 在鼠标被按下的时候发生 |
| onmouseup | 在鼠标被松开的时候发生 |
| onmousemove | 在鼠标被移动的时候发生 |
| onmouseover | 在鼠标指针被移动到指定元素的时候发生 |
| onmouseout | 在鼠标指针被移出到指定元素的时候发生 |
1.2 键盘事件
| onkeydown | 键盘被按下的时候触发事件 |
| onkeypress | 在键盘按下一个键，然后再松开的时候会触发 |
| onkeyup | 当键盘上的一个键被松开的时候会触发 |
1.3 表单事件
| onblur | 元素失去焦点时触发 |
| onfocus | 元素获取焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onselect | 用户选取文本时触发 (比如 <input> 和 <textarea> 中的内容) |
| onsubmit | 表单提交时触发 |
1.4 其他相对常见的事件
| onscroll | 指定元素滑轮发生滚动的时候会触发事件
|
| onresize | 窗口或框架被重新调整大小。
|
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
二. addEventListener() 方法的介绍和使用
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
2.1 语法知识
element.addEventListener(event, function, useCapture)
event：
必须填写不可省略。
注意: 在 addEventListener() 方法中不能使用 "on" 前缀，会报错。 例如，我们要使用 "click" ,而不是使用 "onclick"。
function：
必须填写不可省略。
事件发生时运行的函数。
useCapture:
可以省略不写，默认值是 false
true ：使用事件捕获
false ：使用事件冒泡
2.2 addEventListener() 方法的性质
可以使用外部函数，也可以使用隐函数向一个元素添加多个相同类型的事件处理程序。向一个元素添加多个事件处理程序可以向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。可以对事件进行冒泡或者捕获可以被删除。（<code>removeEventListener() 方法删除事件监听器）
2.2.1 使用外部函数与隐函数
使用外部函数
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
document.getElementById("btn").addEventListener("click",DEMO);
function DEMO(){
document.getElementById("demo").innerHTML = "测试成功";
}
</script>
</html>
使用隐函数
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
document.getElementById("btn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "测试成功";
});
</script>
</html>
2.2.2 向一个元素添加多个事件处理程序
addEventListener() 方法允许向相同元素添加多个事件，同时不覆盖已有事件：
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
document.getElementById("btn").addEventListener("click",DEMO);
document.getElementById("btn").addEventListener("click",myFunction);
function DEMO(){
alert("第一个函数测试成功")
}
function myFunction(){
alert("第二个函数测试成功")
}
</script>
</html>
2.2.3 向一个元素添加多个相同类型的事件处理程序
需要打开控制台查看结果。
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("mouseover", myFunctionOver);
btn.addEventListener("click", DEMO);
btn.addEventListener("mouseout", myFunctionOut);
function myFunctionOver(){
console.log("mouseover","鼠标移入")
}
function DEMO(){
console.log("click","鼠标点击")
}
function myFunctionOut(){
console.log("mouseout","鼠标移出")
}
</script>
</html>
2.2.4 监测window 对象
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = "页面宽度或者高度改变";
});
</script>
</html>
2.2.5 捕获与冒泡
冒泡：从内到外
捕获：从外到内
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
<style>
div
{
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">code>
<p id="myP">点击该段落， 我是冒泡</p>code>
</div><br>
<div id="myDiv2">code>
<p id="myP2">点击该段落， 我是捕获</p>code>
</div>
</body>
<script>
document.getElementById("myP").addEventListener("click", function()
{
alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function()
{
alert("你点击了 DIV 元素!");
}, false);
document.getElementById("myP2").addEventListener("click", function()
{
alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function()
{
alert("你点击了 DIV 元素!");
}, true);
</script>
</html>
2.2.6 可以被删除
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>测试</title>
</head>
<body>
<button id="btn">测试按钮</button>code>
<br>
<br>
<button onclick="shut()">关闭监测按钮</button>code>
<p id="demo"></p>code>
</body>
<script>
document.getElementById("btn").addEventListener("click",DEMO);
function DEMO(){
document.getElementById("demo").innerHTML = "测试成功";
alert("测试成功")
}
function shut(){
document.getElementById("btn").removeEventListener("click", DEMO);
document.getElementById("demo").innerHTML = "";
alert("监测关闭，显示内容为空,再次点击测试按钮没有反应")
}
</script>
</html>
三. 小探讨
如果大家有兴趣的话，可以自己测试一下 addEventListener() 方法的传参效果。
PS：DEMO是"demonstration"的缩写。DEMO的中文含意为“示范”、“展示”、“样片”、“样稿”、“原型”，常被用来称呼具有示范或展示功能及意味的事物。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。