本文详细介绍了JavaScript中的事件处理，包括事件概述、事件绑定的三种方式（行内绑定、动态绑定、事件监听）以及事件流的概念。此外，还讨论了事件对象的获取和常用属性方法。文章还详细分类了各种事件，如页面事件、焦点事件、鼠标事件、键盘事件、表单事件以及图片放大等，帮助读者全面理解JavaScript事件机制。
一、事件处理
1、事件概述
事件：可被理解为是JavaScript侦测到的行为。
举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。
事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。
举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。
事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。
举例：鼠标移入文本区域，文本区域变色这一过程。
事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。
事件流的传播顺序解决方案：网景（Netscape）提出了“事件捕获方式”、微软（Microsoft）提出了“事件冒泡方式”。
2、事件的绑定方式（行内绑定式、动态绑定式、事件监听式）
概述：事件绑定指的是为某个元素对象的事件绑定事件处理程序。
（1）行内绑定式
事件的行内绑定式是通过HTML标签的属性设置实现的。
<标签名 事件="事件的处理程序">标签名可以是任意的HTML标签，如<div>标签、<button>标签等；
事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；
事件的处理程序指的是JavaScript代码，如匿名函数等。
（2）动态绑定式
解决的问题：JavaScript代码与HTML代码混合编写的问题。
实现方式：在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。
DOM元素对象.事件 = 事件的处理程序;事件的处理程序一般都是匿名函数或有名的函数。
行内绑定式与动态绑定式的异同
不同点：
实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。
事件处理程序中关键字this的指向也不同。前者指向window对象，后者指向当前正在操作的DOM元素对象。
相同点：
同一个DOM对象的同一个事件只能有一个事件处理程序。
（3）事件监听式
解决的问题：同一个DOM对象的同一个事件只能有一个事件处理程序，即可给同一个DOM对象的同一个事件添加多个事件处理程序。
实现的方式：具有兼容性问题，一类是早期版本的IE浏览器（如IE6~8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。
DOM对象.attachEvent(type, callback); //早期版本的IE浏览器参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。
参数callback表示事件的处理程序。
DOM对象.addEventListener(type, callback, [capture]); //标准浏览器参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。
参数callback表示事件的处理程序。
参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。
事件监听式的两种不同实现方式的区别：
实现的语法不同。
事件处理程序的触发顺序也不相同，同一个对象的相同事件，早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行。而标准浏览器的事件处理程序按照添加顺序正序执行。
二、事件对象
1、获取事件对象
事件对象的来源：当发生事件时，都会产生一个事件对象event。
事件对象的作用：这个对象中包含着所有与事件相关的信息，包括发生事件的DOM元素、事件的类型以及其他与特定事件相关的信息。
举例：因鼠标移动发生事件时，事件对象中就会包括鼠标位置（横纵坐标）等相关的信息；
获取事件对象的方式
早期IE浏览器（IE6~8）：window.event
标准浏览器：会将一个event对象直接传入到事件处理程序中。
var event = e || window.event;IE8浏览器
Chrome浏览器
2、常用属性和方法
在事件发生后，事件对象event中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。
| 分类 | 属性/方法 | 描述 |
| 公有的 | type | 返回当前事件的类型，如click |
| 标准浏览器事件对象 | target | 返回触发此事件的元素（事件的目标节点） |
| currentTarget | 返回其事件监听器触发该事件的元素 | |
| bubbles | 表示事件是否是冒泡事件类型 | |
| cancelable | 表示事件是否取消默认动作 | |
| eventPhase | 返回事件传播的当前阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段 | |
| stopPropagation() | 阻止事件冒泡 | |
| preventDefault() | 阻止默认行为 | |
| 早期版本IE浏览器事件对象 | srcElement | 返回触发此事件的元素（事件的目标节点） |
| cancelBubble | 阻止事件冒泡，默认为false表示允许，设置true表示阻止 | |
| returnValue | 阻止默认行为，默认为true表示允许，设置false表示阻止 |
获取触发事件的元素
var btn = document.getElementById('btn');
btn.onclick = function(e) {
var obj = event.target || window.event.srcElement;
console.log(obj.nodeName);
console.log(obj.id);
console.log(obj.className);
console.log(obj.innerText);
};
事件冒泡
red.onclick = function() { console.log('red'); };
green.onclick = function() { console.log('green'); };
yellow.onclick = function() { console.log('yellow'); };
阻止事件冒泡
if (window.event) { // 早期IE浏览器
window.event.cancelBubble = true;
} else { // 标准浏览器
e.stopPropagation();
}HTML中有些元素标签拥有一些特殊的行为。例如，单击<a>标签后，会自动跳转到href属性指定的URL链接；单击表单的submit按钮后，会自动将表单数据提交到指定的服务器端页面处理。因此，我们把标签具有的这种行为称为默认行为。
禁止默认行为
<a id="test" href="https://blog.youkuaiyun.com/qq_42839746?type=blog">默认链接</a>
<script>
document.getElementById('test').onclick = function (e) {
if (window.event) { // 早期版本IE浏览器
window.event.returnValue = false;
} else { //标准浏览器
e.preventDefault();
}
};
</script>三、事件分类
1、页面事件
HTML页面的加载是按照代码的编写顺序，从上到下依次执行的。
会出现的问题：若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误。
页面加载顺序的问题
<script>
document.getElementById('demo').onclick = function () {
console.log('单击');
};
</script>
<div id="demo"></div>
解决办法：页面事件可以改变JavaScript代码的执行时机。
load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。
unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。
window.onload = function() {
// JavaScript代码
};2、焦点事件
在Web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。
例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。
| 事件名称 | 事件触发时机 |
| focus | 当获得焦点时触发（不会冒泡） |
| blur | 当失去焦点时触发（不会冒泡） |
3、鼠标事件
鼠标事件是Web开发中最常用的一类事件。
例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。
| 事件名称 | 事件触发时机 |
| click | 当按下并释放任意鼠标按键时触发 |
| dblclick | 当鼠标双击时触发 |
| mouseover | 当鼠标进入时触发 |
| mouseout | 当鼠标离开时触发 |
| change | 当内容发生改变时触发，一般多用于<select>对象 |
| mousedown | 当按下任意鼠标按键时触发 |
| mouseup | 当释放任意鼠标按键时触发 |
| mousemove | 在元素内当鼠标移动时持续触发 |
在项目开发中还经常涉及一些常用的鼠标属性，用来获取当前鼠标的位置信息。
| 位置属性（只读） | 描述 |
| clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标） |
| clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标） |
| pageX | 鼠标指针位于文档的水平坐标（X轴坐标），IE6~8不兼容 |
| pageY | 鼠标指针位于文档的垂直坐标（Y轴坐标），IE6~8不兼容 |
| screenX | 鼠标指针位于屏幕的水平坐标（X轴坐标） |
| screenY | 鼠标指针位于屏幕的垂直坐标（Y轴坐标） |
4、键盘事件
键盘事件是指用户在使用键盘时触发的事件。
例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。
| 事件名称 | 事件触发时机 |
| keypress | 键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发 |
| keydown | 键盘按键按下时触发 |
| keyup | 键盘按键弹起时触发 |
温馨提示：
keypress事件保存的按键值是ASCII码，
keydown和keyup事件保存的按键值是虚拟键码。
5、表单事件
表单事件指的是对Web表单操作时发生的事件。
例如，表单提交前对表单的验证，表单重置时的确认操作等。JavaScript提供了相关的表单事件。
| 事件名称 | 事件触发时机 |
| submit | 当表单提交时触发 |
| reset | 当表单重置时触发 |
6、图片放大
gallery.html代码
<!DOCTYPE html>
<html lang='pl'>
<head>
<title>相册</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
<link href="gallery.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="gallery" class="gallery">
<h1>小清新相册之动感水果系列</h1>
<ul>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/01.jpg" alt="" title="杨梅">
<div>杨梅</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/02.jpg" alt="" title="桑葚">
<div>桑葚</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/03.jpg" alt="" title="猕猴桃">
<div>猕猴桃</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/04.jpg" alt="" title="香蕉">
<div>香蕉</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/05.jpg" alt="" title="芒果">
<div>芒果</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/06.jpg" alt="" title="苹果">
<div>苹果</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/07.jpg" alt="" title="草莓">
<div>草莓</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/08.jpg" alt="" title="梨">
<div>梨</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/09.jpg" alt="" title="橙子">
<div>橙子</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/10.jpg" alt="" title="西瓜">
<div>西瓜</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/11.jpg" alt="" title="樱桃">
<div>樱桃</div>
</li>
<li class="gallery-item">
<img src="https://z4a.net/images/2022/09/14/12.jpg" alt="" title="柠檬">
<div>柠檬</div>
</li>
</ul>
</div>
<div class="mask">
<div class="mask-backdrop">
<img src="img/98.jpg" alt="" class="ma5-clone" id="photo">
</div>
<div class="mask-close">
<span class="mask-icon-close"></span>
</div>
<div class="mask-prev">
<span class="mask-icon-left"></span>
</div>
<div class="mask-next">
<span class="mask-icon-right"></span>
</div>
<div class="mask-figcaption">
<span class="mask-icon-info"></span>
<span id="figcaption"></span>
</div>
</div>
</body>
<script type="text/javascript">
var current=0
var galleryList=document.getElementById('gallery').getElementsByTagName('ul')[0]
var imglist=document.getElementById('gallery').getElementsByTagName('img') //div#gallery所有的img
console.log(imglist)
var mask=document.getElementsByClassName('mask')[0]
var btnclose=document.getElementsByClassName('mask-close')[0]
var btnnext=document.getElementsByClassName('mask-next')[0]
var btnprev=document.getElementsByClassName('mask-prev')[0]
var photo=document.getElementById('photo')
var figcaption=document.getElementById('figcaption')
galleryList.onclick=function(event){ //event是事件对象
var target=event.target //如: <img src="img/01.jpg" alt="" title="杨梅"> 或 <div>杨梅</div>
if(target.nodeName!=='IMG') {
return false //判断不是图片，那么程序就应该返回
}
mask.style.display="block"
photo.src=target.getAttribute('src') //'img/01.jpg'
figcaption.innerHTML=target.getAttribute('title') //"杨梅"
for(var i=0;i<imglist.length;i++){
if(imglist[i].src=== photo.src){
current=i //如i=5
}
}
}
function close(){
mask.style.display="none"
}
btnclose.onclick=function() {
close()
}
function changeimg(){
photo.src=imglist[current].src //如："img/48.jpg"
figcaption.innerHTML=imglist[current].title
}
function prev(){
current-- //i=-1
if(current<0){
current=imglist.length-1 //i=11
}
changeimg()
}
function next(){
current++ //如i=11
if(current>imglist.length-1){
current=0
}
changeimg()
}
btnnext.onclick=function(){
next()
}
btnprev.onclick=function(){
prev()
}
//键盘事件
document.onkeydown=function(event){
if(event.keyCode===27) //说明用户点击键盘ESC
{
close()
}
//左边方向键
if(event.keyCode===37)
{
prev()
}
//右边方向键
if(event.keyCode===39)
{
next()
}
}
</script>
</html>gallery.css代码
.gallery {
width: 1200px;
margin: 10px auto;
}
.gallery ul {
width: 100%;
padding: 0;
list-style: none;
margin: 0 auto;
overflow: hidden;
}
.gallery-item {
float: left;
position: relative;
width: 375px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #626262;
cursor: pointer;
overflow: hidden;
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
}
.gallery-item div {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2rem;
line-height: 2rem;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.gallery li::after {
font-family: ma5galleryfont;
content: "";
position: absolute;
bottom: .5rem;
right: .5rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
line-height: 1;
display: block;
width: 1rem;
height: 1rem;
cursor: pointer;
background-color: rgba(85, 85, 85, 0.4);
color: white;
-webkit-font-smoothing: antialiased;
padding: .6rem 0 0 .6rem;
border-radius: 3rem;
}
.mask {
display: none;
}
.mask .mask-backdrop {
background-color: black;
transition: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.mask-backdrop img {
position: absolute;
width: 82%;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.mask-close {
position: absolute;
right: 3rem;
top: 1rem;
}
.mask-prev {
position: absolute;
top: 50%;
left: 3rem;
}
.mask-next {
position: absolute;
top: 50%;
right: 3rem;
}
.mask-figcaption{
position: absolute;
top: 1rem;
left: 1rem;
text-shadow: 1px 1px 2px #000;
}
.mask-figcaption span{
font-size: 1.5rem;
color: #fff;
padding-left: 2.5rem;
}
/* screen end */
@font-face {
font-family: 'ma5galleryfont';
src: url("data:application/octet-stream;base64,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") format("woff");
}
[class*=" mask-icon-"]:before,
[class^="mask-icon-"]:before {
position: absolute;
top: .1rem;
display: inline-block;
font-family: 'ma5galleryfont';
font-size: 2rem;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mask-icon-close:before {
content: '\e806';
}
.mask-icon-left:before {
content: '\e807';
}
.mask-icon-right:before {
content: '\e808';
}
.mask-icon-info::before{
content: '\e802';
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
