JavaScript事件
2021-07-10 本文已影响0人
微语博客
HTML事件
HTML事件是发生在HTML元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以对这些事件作出响应。HTML 事件可以是浏览器行为，也可以是用户行为。本篇文章讲解JavaScript对一些常用HTML事件的响应，具体都有哪些HTML事件可以参考我的另一篇文章 HTML事件
事件属性
可以为HTML添加事件属性，事件属性的值为JavaScript代码，可以是函数，也可以是表达式。语法为<button onclick="javascript代码">按钮</button>，当然也可以不是button元素，也可以不是onclick事件。以下代码以点击事件为示例，点击事件也是最常用的事件之一。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="alert('我被点击了')">点我</button>
<!--点击按钮弹出一个警告框-->
<script>
</script>
</body>
</html>
除了使用HTML事件属性对事件作出响应，我们还可以用JavaScript将事件赋值给HTML元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button id="btn">再点我一次</button>
<script>
var btn = document.getElementById("btn");//获取元素实例
btn.onclick = function (){ //函数赋值给事件
alert("我又被点击了");
//由于JS代码会初始化执行一次，我们不能直接将alert赋值给事件
}
</script>
</body>
</html>
事件句柄：JS除了设置HTML元素事件属性，还可以为元素添加或删除事件句柄，事件句柄也可以理解为添加回调函数。添加事件句柄还可以阻止某些事件的默认行为，这对自定义事件很有帮助。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button id="btn">再点我一次</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",function (event){//添加click事件句柄
alert("我又被点击了");
console.log(event);
});
btn.addEventListener()
</script>
</body>
</html>
以上三种方式都可以为元素添加JS对事件的响应，遵从低耦合的原则，第一种方式并不是很推荐。还有一个特别要注意的是，添加或移除事件句柄的时候事件名都是不带on的，比如onclick直接添加字符串的click就行，其他事件也一样。
常用事件
这里演示几个常用事件在什么时候触发，主要都是鼠标事件，其他事件用法也都一样。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box{
width: 400px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box">将鼠标移出或移入, 单击双击等操作, 观察控制台的输出</div>
<script>
document.getElementsByTagName("body")[0].onload = function (){
console.log("页面完成加载，触发onload事件");//该事件经常用于body或img元素
}
var box = document.getElementById("box");//获取元素实例
box.onmouseenter = function (){
console.log("鼠标进入元素，触发onmouseenter事件");
}
box.onmousemove = function (){
console.log("鼠标在元素中移动，触发onmousemove事件");
}
box.onmouseleave = function (){
console.log("鼠标移出元素，触发onmouseleave事件");
}
box.ondblclick = function (){
console.log("元素被双击，触发ondbclick事件");
}
box.onclick = function (){
console.log("元素被单击，触发onclick事件");
}
</script>
</body>
</html>
JavaScript可以为事件做些什么
上面我们只是简单的为事件作出输出内容，其实事件真正的应用并不在这里。事件可以用于处理表单验证，用户输入，用户行为及浏览器动作。比如页面加载时获取资源，页面关闭时保存数据，用户点击按钮执行动作，验证用户输入内容的合法性 等等。
