一、事件概述
（1） 认识事件
事件Event，描述了根据用户在网页中的操作行为，执行一定的功能的操作过程
（2） 事件的绑定
网页中事件的绑定方式，常见的有三种：
- 标签属性绑定
-
JavaScript对象属性绑定 - 标准事件绑定函数
addEventListener
<!DOCTYPE html>
<html lang="zh">
<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>
<h3>1、标签绑定</h3>
<!--
通过标签的事件属性，指定一个执行函数
当指定的事件发生时，对应的函数就会执行
onclick 单击事件
当用户点击了当前按钮，对应的hanlder()函数就会执行
注意：不能同时绑定多个事件函数；只有第一个会生效
-->
<button onclick="handler()"
onclick="handler2()">点击我试试</button>
<h3>2、对象绑定方式</h3>
<button id="btn">对象来了</button>
<h3>3、事件标准绑定方式</h3>
<button id="my-btn">标准语法来了</button>
<script>
// 1-1 事件处理函数
function handler() {
alert("你点我干吗，今天又不休息!!!")
}
function handler2() {
alert("没有关系，今天已经周三了..")
}
// 2-1 对象绑定函数
var _btn = document.getElementById("btn")
// 通过对象的事件属性，给事件添加一个处理函数
// 事件名称，大小写敏感(不能写错onClick 和onclick是两个不同的东西)
// 不能同时绑定多个事件处理函数
// 如果写了多个事件处理函数，最后一个生效（解释型特点）
_btn.onclick = function() {
alert("还有两天本周又结束了...")
}
_btn.onclick = function() {
alert("提前祝大家周末愉快...")
}
// 3-1 标准事件绑定方式
var _myBtn = document.getElementById("my-btn")
// 通过固定函数，给标签对象绑定事件
// addEventListener: add 增加 Event 事件 Listener 监听
// 标准语法下：事件名称不需要添加on单词，单击事件click
// 标准语法下：可以给一个标签对象，添加多个相同事件
_myBtn.addEventListener("click", function() {
alert("本周学习目标：语法进阶")
})
_myBtn.addEventListener("click", function() {
alert("本周锻炼：开始出现自己的编程思路")
})
</script>
</body>
</html>
（3） 事件的取消
① 对象属性绑定的事件，取消
_btn.onclick = function() {...}
// 取消事件
_btn.onclick = null
② 标准语法绑定事件，取消
function handler() {
// 事件处理函数
}
// 绑定事件
_btn.addEventListener("click", handler)
// 取消指定事件
_btn.removeEventListener("click", handler)
（4）this关键字
// 1、全局函数中的this，指向浏览器窗口对象
function fn() {
// 普通声明的函数，this指向的是浏览器窗口对象Window
console.log("this:", this)
}
// 函数的调用
// fn()
// window.fn()
// 以前弹窗
// alert("这是一个弹窗")
// window.alert("这是一个浏览器弹窗")
// 2、事件函数
var _btn = document.getElementById("btn")
_btn.onclick = function() {
// 事件操作函数中，this指向当前操作标签
console.log("事件函数this:", this)
}
// 3、标准语法
var _btn2 = document.getElementById("btn2")
_btn2.addEventListener("click", function() {
// 事件函数中，this指向的是当前操作标签
console.log("addEventListener this:", this)
})
（5） 常见网页事件
| 事件 | 名称 | 描述 |
|---|---|---|
onclick |
单击事件 | 鼠标左键点击 |
ondblclick |
双击事件 | 鼠标左键双击 |
onmouseenter |
鼠标进入 | 鼠标光标从元素外移动到元素上 |
onmouseover |
鼠标悬浮 | 鼠标光标在目标元素上 |
onmouseleave |
鼠标离开 | 鼠标光标从元素上移动到元素外 |
onkeydown |
按键按下 | 键盘上任意按键，按下时触发 |
onkeyup |
按键抬起 | |
oncopy |
复制 | |
oncut |
剪贴 | |
onparse |
粘贴 | |
onload |
网页加载 | 网页第一次在浏览器中加载，加载完成时触发 |
onscroll |
滚动条 | 网页中滚动条滚动时触发 |
onresize |
窗口尺寸变化 | 浏览器可视窗口大小发生变化时触发 |
鼠标事件
image.png
键盘事件
image.png
触摸事件
触摸touch事件 说明
touchstart 手指触摸到一个 DOM 元素时触发touchmove 手指在一个 DOM 元素上滑动时触发touchend 手指从一个 DOM 元素上移开时触发表单事件
image.png
过渡事件
过渡事件 触发条件
ontransitionend 在过渡完成时触发动画事件
动画事件 触发条件
onanimationend 在动画结束播放时触发onanimationiteration 在动画重复播放时触发onanimationstart 在动画开始播放时触发（6） 事件对象[重点]
① 什么是事件对象？
事件对象
event，描述了一个正在发生的事件行为！可以在事件的处理函数中直接获取到并通过事件对象操作某些数据！② 如何获取事件对象
<body>
<button onclick="fn()">获取事件对象</button>
<script>
// 添加一个单击事件
// 如果没有给事件函数传递参数，默认第一个参数就是事件对象
function fn(e) {
// 事件对象，存在兼容性问题，获取的时候需要判断赋值
var e = e || event
console.log("事件对象：", e)
}
</script>
</body>
③ 事件对象的重要属性
| 属性 | 描述 |
|---|---|
altKey |
操作事件时有没有按下Alt按键 |
ctrlKey |
操作事件时有没有按下Ctrl按键 |
shiftKey |
操作事件时有没有按下shift按键 |
clientX / clientY |
鼠标指针 相对于 浏览器可视窗口左上角定位 |
pageX / pageY |
鼠标指针 相对于 网页文档 左上角定位 |
offsetX / offsetY |
鼠标指针 相对于 操作的标签 左上角的定位 |
screenX / screenY |
鼠标指针 相对于 电脑屏幕 左上角的定位 |
layerX / layerY |
了解、鼠标指针相对于 定位父元素/body 左上角的定位 |
x / y |
了解，鼠标指针相对于 父文档 左上角的定位 |
④ 事件执行过程[3个阶段]
原生JavaScript语法中，规范了事件的执行过程，区分为三个阶段
- 捕获阶段：查询那个目标标签被点击
- 目标阶段：被操作的标签上事件触发，并执行对应的函数
- 冒泡阶段：标签上的事件触发完成，将事件继续向父标签传递，一直到根标签
⑤ 事件-阻止冒泡
实际项目开发中，事件的冒泡是一个很重要的功能，但是在某些特效中需要阻止冒泡：也就是具体目标元素上的事件一旦触发，不允许事件继续向上冒泡，会影响网页特效
原生JavaScript中提供了阻止冒泡的语法，通过事件对象进行操作：
// 固定语法
if(event.stopPropagation) {
event.stopPropagation() // 通用阻止事件冒泡的方式
} else {
event.cancelBubble = true // 兼容IE系列浏览器阻止冒泡的方式
}
⑥ 事件-阻止默认行为
给超链接标签，添加单击事件；发现事件触发的同时页面也发生了跳转；
项目中的某些特效开发过程中，需要这样的行为按照代码执行逻辑发生，而不是跟随标签自动产生！
原生JavaScript语法中，提供了阻止默认行为的操作方式：
if(e.preventDefault) {
e.preventDefault() // 传统浏览器阻止标签默认行为
} else {
e.returnValue = false // IE系列浏览器阻止标签默认行为
}
网友评论