# DOM操作之事件监听
# 事件监听
事件监听是浏览器实现交互的重要技术之一， 比如页面的按钮，我们点击它，就会触发一些相应的事件逻辑，我们点击动作被浏览器捕捉到，这个事件就被成为点击事件
由于输入设备以及输入设备的操作不同，所以要封装很多监听事件
常用的监听事件还有
- 鼠标的单击事件
- 鼠标的双击事件
- 鼠标的滑轮滚动sh
- 键盘的按下事件
- 键盘的抬起事件
js 提供了一系列监听事件的方法
# 常用的鼠标监听事件
| onclick | 鼠标单机某个元素 |
|---|---|
| ondblclick | 鼠标双击某个元素 |
| onmousedown | 鼠标在某个元素上按下 |
| onmouseup | 鼠标在某个元素上抬起 |
| onmousemove | 鼠标在某个元素上移动 |
| onmouseenter | 鼠标进入某个元素 |
| onmouseleave | 鼠标离开某个元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Normal Listner</title>
<style>
#divBox {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="divBox"></div>
<script>
var divBox = document.getElementById('divBox');
divBox.onclick = function(event) {
console.log('onclick listener');
console.log(event);
};
divBox.ondblclick = function(event) {
console.log('ondblclick');
console.log(event);
}
divBox.onmousedown = function(event) {
console.log('onmousedown ');
console.log(event);
}
divBox.onmouseup = function(event) {
console.log('onmouseup ');
console.log(event);
}
divBox.onmousemove = function(event) {
console.log('onmousemove')
console.log(event);
}
divBox.onmouseenter = function(event) {
console.log('onmouseenter');
console.log(event);
}
divBox.onmouseleave = function(event){
console.log('onmouseleave')
console.log(event);
}
</script>
</body>
</html>
# 常用的键盘监听事件
| 事件名 | 事件描述 |
|---|---|
| onkeypress | 当某个键盘的键被按下，箭头等一些功能键无法被正确识别到 |
| onkeydown | 当某个键盘的键被按下， 箭头等一些功能键无法被正确识别到 |
| onkeypup | 键盘某个键被松开时 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘键监听</title>
</head>
<body>
姓名
<input type="text" id="nameField">
<script>
var nameFiled = document.getElementById('nameField');
nameFiled.onkeypress = function(e) {
console.log(e);
console.log("onkeypress");
}
nameFiled.onkeydown = function(e){
console.log("onkeydown");
console.log(e);
}
nameFiled.onkeyup = function() {
console.log("onkeyup");
console.log(e);
}
</script>
</body>
</html>
# 常见的表单监听事件
表单监听比较重要， 是页面接收用户输入数据，并触发提交数据的重要技术。
| 事件名 | 事件描述 |
|---|---|
| onchange | 当用户改变域的内容 |
| onfocus | 当某元素获得焦点（比如tab键或鼠标点击） |
| onblur | 当某元素失去焦点 |
| onsubmit | 当表单被提交 |
| onreset | 当表单被重置 |
| oninput | 输入时监听持续监听 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>formListener</title>
</head>
<body>
<form id="myForm">
<p>姓名 <input type="text" name="nameFiled"></p>
<p>年龄 <input type="text" name="ageFiled"></p>
<input type="submit">
</form>
<script>
var myForm = document.getElementById('myForm');
var nameFiled = myForm.nameFiled;
var ageFiled = myForm.ageFiled;
nameFiled.onchange = function(event) {
console.log('完成修改姓名')
console.log(event);
}
nameFiled.oninput = function(event) {
console.log('input 正在修改姓名');
console.log(event);
}
nameFiled.onfocus = function(event) {
console.log('姓名框已经得到了焦点');
console.log(event);
}
nameFiled.onblue = function(event) {
console.log('姓名已经失去焦点');
console.log(event);
}
myForm.onsubmit = function(event) {
console.log(event);
alert('你正在提交表单');
}
</script>
</body>
</html>
# 常见的页面监听事件
| 事件名 | 事件描述 |
|---|---|
| onload | 当页面或者图像被完成加载 |
| onunload | 当用户关闭界面 (避免使用此方法，这个方法实在看不出效果) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windos.onLoad</title>
</head>
<body>
<script>
window.onload = function(event) {
console.log('window onload');
console.log(event);
alert('打开页面?');
}
</script>
</body>
</html>
可以看到，每个监听事件都可以传入一个 event的事件参数， 通过event我们可以判断是哪种事件类型，也可以从里面获得一些有用的信息， 比如我们的键盘事件，输入的键盘字母等
← DOM操作之克隆节点 DOM操作之事件传播 →