-
前端研习录（30）——JavaScript 事件讲解及示例分析
版权声明
- 本文原创作者：清风不渡
- 博客地址：https://blog.csdn.net/WXKKang
重拾前端记忆，记录学习笔记，现在进入JavaScript 事件部分
一、事件处理程序
事件处理程序分为以下三种：
- HTML事件处理
- DOM0级事件处理
- DOM2级事件处理
示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清风不渡title> head> <body> <button onclick="clickHandle()">HTML事件按钮button> <button id="btn">DOM0级按钮button> <button id="btn1">DOM2级按钮button> <script> // HTML事件 function clickHandle() { alert("点击了HTML事件按钮"); } // DOM0级事件 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("点击了DOM0级按钮A"); } btn.onclick = function(){ alert("点击了DOM0级按钮B"); } // DOM2级事件 var btn1 = document.getElementById("btn1") btn1.addEventListener("click",click1); btn1.addEventListener("click",click2); btn1.removeEventListener("click",click3) function click1() { alert("第一次DOM2级事件"); } function click2() { alert("第二次DOM2级事件"); } function click3() { alert("第三次DOM2级事件"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
效果如下，点击HTML事件按钮:
点击DOM0级按钮，可以看到“点击了DOM0级按钮A”提示并没有展示，如下：
点击DOM2级按钮，依次出现以下两种提示：
由此可以得出以下结论：
HTML事件的缺点：HTML与JS代码没有分开
DOM0级事件的优点：HTML与JS代码是分离的。缺点：存在多个事件会进行覆盖
DOM2级事件的优点：存在多个事件不会进行覆盖，会依次执行二、鼠标事件
鼠标事件指与鼠标相关的事件，具体的事件列举如下：
- click：按下鼠标时触发
- dblclick：在同一个元素上双击鼠标时触发
- mousedown：按下鼠标键时触发
- mouseup：释放按下鼠标键时触发
- mousemove：当鼠标在节点内部移动时触发，当鼠标持续移动时，该事件会触发
- mouseenter：当鼠标进入一个节点时触发，进入子节点不会触发这个事件
- mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
- mouseover：鼠标进入一个节点时触发，进入子节点时会再一次触发这个事件
- mouseout：鼠标离开一个节点时触发，离开父节点时也会触发这个事件
- wheel：滚动鼠标的滚轮时触发
注意：这些方法在使用的时候，除了DOM2级事件，都要添加on前缀
示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清风不渡title> <style> .box1{ width: 100px; height: 100px; background-color: aqua; } .box2{ width: 200px; height: 200px; background-color: antiquewhite; margin-top: 30px; } style> head> <body> <button id="btn1">单击button> <button id="btn2">双击button> <button id="btn3">按下button> <button id="btn4">释放button> <div id="box1" class="box1">div> <div id="root1" class="box2"> <div id="box2" class="box1">div> div> <div id="root2" class="box2"> <div id="box2" class="box1">div> div> <div id="root3" class="box2">div> <script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); var btn4 = document.getElementById("btn4"); var box1 = document.getElementById("box1"); var root1 = document.getElementById("root1"); var root2 = document.getElementById("root2"); var root3 = document.getElementById("root3"); btn1.onclick = function(){ console.log("鼠标单击打印"); } btn2.ondblclick = function(){ console.log("鼠标双击打印"); } btn3.onmousedown = function(){ console.log("鼠标按下打印"); } btn4.onmouseup = function(){ console.log("鼠标释放打印"); } box1.onmousemove = function(){ console.log("鼠标移动打印"); } root1.addEventListener("mouseenter",enter1); root1.addEventListener("mouseleave",leave1) function enter1() { console.log("鼠标进入打印A"); } function leave1() { console.log("鼠标离开打印A"); } root2.addEventListener("mouseover",over1); root2.addEventListener("mouseout",out1) function over1() { console.log("鼠标进入打印B"); } function out1() { console.log("鼠标离开打印B"); } root3.onwheel = function(){ console.log("滑动滚轮"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
三、Event事件对象
事件发生后，会产生一个事件对象，作为参数传递给监听函数，如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <button id="btn1">单击按钮button> <script> var btn1 = document.getElementById("btn1"); btn1.onclick = function(event){ console.log(event); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
结果如下：
1、Event对象属性
（1）Event.target
Event.target 属性返回事件当前所在节点，示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <button id="btn1">单击按钮button> <script> var btn1 = document.getElementById("btn1"); btn1.onclick = function(event){ console.log(event.target); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
结果如下：
（2）Event.type
Event.type属性返回一个字符串，表示事件类型，该属性只读，示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <button id="btn1">单击按钮button> <script> var btn1 = document.getElementById("btn1"); btn1.onclick = function(event){ console.log(event.type); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
结果如下：
2、Event对象方法
（1）Event.preventDefault
Event.preventDefault 用于取消浏览器对当前事件的默认行为，示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <a href="https://www.baidu.com/" id="baidu">前往百度a> <script> var baidu = document.getElementById("baidu"); baidu.onclick = function(event){ event.preventDefault(); console.log("点击了a标签"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
结果如下，点击a标签不会进行页面跳转，且继续执行下面的js代码：
（2）Event.stopPropagation
Event.stopPropagation 方法用于阻止事件在DOM中继续传播，防止再触发定义在别的节点上的事件监听函数，但是不包括在当前节点其他的事件监听函数，示例如下：
如果没有使用Event.stopPropagation方法时：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .root{ width: 200px; height: 200px; background-color: bisque; } .box{ width: 100px; height: 100px; background-color: burlywood; } style> head> <body> <div class="root" id="root"> <div class="box" id="box">div> div> <script> var root = document.getElementById("root"); var box = document.getElementById("box"); root.onclick = function(){ console.log("点击了root"); } box.onclick = function(){ console.log("点击了box"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
结果如下，点击box会触发父节点root的监听函数：
使用Event.stopPropagation方法防止再触发定义在别的节点上的事件监听函数，代码如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .root{ width: 200px; height: 200px; background-color: bisque; } .box{ width: 100px; height: 100px; background-color: burlywood; } style> head> <body> <div class="root" id="root"> <div class="box" id="box">div> div> <script> var root = document.getElementById("root"); var box = document.getElementById("box"); root.onclick = function(){ console.log("点击了root"); } box.onclick = function(e){ e.stopPropagation(); console.log("点击了box"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
结果如下，点击box只触发本节点的监听函数：
四、键盘事件
键盘事件由用户敲击键盘时触发，主要有一下三个事件：
- keydown 按下键盘时触发
- keypress 按下有值的键时触发
- keyup 松开键盘时触发
注意：对于keypress，按下Ctrl、Alt、Shift、Meta这样无值的键时不会触发；而对于有值的键，按下时先触发keydown事件，再触发这个事件
示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清风不渡title> head> <body> <input type="text" id="user"> <script> var user = document.getElementById("user"); user.onkeydown = function (){ console.log("按下了键盘"); } user.onkeypress = function(){ console.log("按下了有值的键"); } user.onkeyup = function(e){ console.log("松开了键盘"); console.log("输入的内容是："+e.target.value); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
结果如下：
1、event对象
keyCode：唯一标识，可通过此属性判断按下了什么键，示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清风不渡title> head> <body> <input type="text" id="user"> <script> var user = document.getElementById("user"); user.onkeydown = function (e){ console.log("按下了键盘"); if (e.keyCode === 13){ console.log("按下了回车"); } } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
在输入框敲击回车时，结果如下：
五、表单事件
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
- input事件
- select事件
- Change事件
- reset事件
- submit事件
1、input事件
input事件 当、
