一、注册事件(绑定事件)
1.概述
给元素添加事件,称为注册事件 / 绑定事件
注册事件有两种方式:传统事件方法和监听注册方法
2.传统注册方式
传统注册事件是利用on开头的事件,DOM 0级事件绑定方法
<button onclick = 'alert(点击了按钮)'>按钮</button>
/----------------------------------------/
<button>按钮</button>
const btn = document.querySelector('button')
btn.onclick = function(){
alert('点击了按钮')
}
传统点击事件的特点:注册事件的唯一性同一个元素,同一个事件只能设置一个处理函数,最后注册的处理函数将会前面的处理函数覆盖
3.监听注册方式
DOM 2即事件绑定方式
element.addEventListener(事件类型,事件处理函数)
方法
第一个参数:事件类型的字符串(直接书写,不需要加on,例:"mousemove")
第二个参数:事件处理函数,事件发生时,会调用该监听函数
监听注册方式的特点:同一元素可以多次绑定事件监听,同一个事件类型可以注册多个事件函数
二、删除事件
1.传统注册事件
例如:eventTarget.onclick = null
var btn = document.getElementById("btn");
// DOM 0级事件绑定方式
// 传统注册方式
btn.onclick = function () {
alert(1);
};
// 解除绑定方法
btn.onclick = null;
2.监听注册方式
element.removeEventListener(事件类型,事件处理函数) 方法
第一个参数:事件类型的字符串(直接书写” click” ,不需要加 on)
第二个参数:事件函数引用名
注意:没有办法移出一个匿名函数,所以在注册事件时需要单独声明一个有函数名的事件函数
var btn = document.getElementById("btn");
// 绑定事件
btn.addEventListener("click", fun);
function fun() {
alert(1);
// 解除绑定
btn.removeEventListener("click", fun);
}
// 点击按钮,只弹出一次1,点第二次不再弹出
三、DOM事件流
事件流描述的就是页面中接收事件的顺序、事件的流向
事件发生是会在元素节点之间按照待定的顺序传播,这个传播的过程就是DOM事件流
1.事件流的三个阶段
DOM事件流主要有三个阶段,分别是:
第一阶段:事件捕获
第二阶段:事件触发阶段
第三阶段:冒泡阶段
事件捕获:是由DOM最顶层节点开始 ,然后逐级向下传播到具体的元素接收的过程
事件冒泡:事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层的节点的过程
<div id="father">
<div id="son"></div>
</div>
<script>
var father = document.getElementById("father");
var son = document.getElementById("son");
// 事件捕获
father.addEventListener("click", f1, true);
son.addEventListener("click", f2, true);
function f1() {
alert("father");
}
function f2() {
alert("son");
}
// 当点击 son 时,先弹出 father,再弹出 son
</script>
// 事件冒泡
father.onclick = function () {
alert("father");
};
son.onclick = function () {
alert("son");
};
// 当点击 son 时,先弹出 son,再弹出 father
需要注意的是:
(1)JS 代码中只能执行捕获 / 冒泡其中的一个阶段
(2)onclick 只能得到冒泡阶段
(3)addEventListener() 第三个参数为 false(或默认)时,事件冒泡
(4)addEventListener() 第三个参数为 true 时,事件捕获
(5)实际开发中很少用事件捕获,更关注事件冒泡
(6)有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave
(7)事件冒泡有时会带来麻烦,有时又会很巧妙的帮助做某些事情
2.事件委托
事件委托也称事件代理、事件委派
事件委托的原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点(即给父节点添加侦听器,利用事件冒泡影响每一个子节点)
事件委托的作用:只操作了一次DOM元素,提高了程序的性能
// 让每个小 li 被点击后,给当前的小 li 添加特殊的背景颜色,而其他兄弟不添加
// 事件委托:可以将一些子级的公共类型的事件委托给它们的父级添加,在父级内部想办法找到真正触发事件的最底层的事件源
// 获取 ul
var list = document.getElementById("list");
// 获取 ul 里所有的 li
var lis = list.children;
list.addEventListener("click", function (e) {
// 在内部要想办法找到真正触发事件的小 li
// 借用事件函数内部的一个参数 e,e 是事件对象
// e.target 属性记录的就是真正触发事件的事件源
// 排除其他
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = "";
}
e.target.style.backgroundColor = "pink";
});
3.事件对象
我都没有对象,事件会有对象?那
1.什么是事件对象呢?
DOM元素,只要触发事件,就会有一个对象,它内部存储了与事件相关的数据
eventTarget.onclick = function (e) {}
eventTarget.addEventListener("click",function (e) {})
// 这里的 e 就是事件对象,也可以写成 event / evt
官方给出的解释:event对象代表事件的状态,比如键盘按键的状态、鼠标/键盘的状态、鼠标的位置等
简单的理解为:当事件触发后,跟事件相关的一系列信息数据的集合都会昂在这个对象里面,这个对象就是事件对象event,他有很多的属性和方法,可以在控制台打印出来看一下
上图为键盘按下事件的事件对象的部分的内容
2.事件对象的常见属性和方法
① e.eventPhase:查看事件触发时所处的阶段
判断出事件执行时处于哪个阶段
1:表示捕获阶段
2:表示目标阶段
3:表示冒泡阶段
② e.target:用于获取触发事件的元素
标准,IE678 不识别
获取真正触发事件的元素
例如:点击了哪个元素,就返回哪个元素
③ e.srcElement:用于获取触发事件的元素
低版本浏览器使用
非标准,IE678 识别使用
兼容性写法:var target = e.target || e.srcElement;
④ e.currentTarget:用于获取绑定事件的事件源元素
IE678 无法识别
和 this 非常相似,都指向绑定事件的事件源元素,一般都使用 this
⑤ e.type:获取事件类型
比如:click、mouseover(不带 on)
实际应用:可以将所有给一个元素绑定的事件的事件函数写在一个函数内,通过函数内部的 e.type 判断走不同的分支
// 鼠标经过变颜色,鼠标离开后恢复为原来的颜色色
box.onmouseover = fn;
box.onmouseout = fn;
function fn(e) {
e = e || window.event;
switch (e.type) {
case "mouseover":
box.style.backgroundColor = "pink";
break;
case "mouseout":
box.style.backgroundColor = "skyblue";
break;
}
}
⑦ e.preventDefault():取消默认行为
DOM 标准写法,IE678 不识别
比如不让链接跳转,不让提交按钮提交
⑧ e.returnValue:取消默认行为
非标准,低版本浏览器使用
// 让 a 链接不跳转
a.onclick = function (e) {
e = e || window.event;
alert("hello world");
// 普通的方式阻止默认行为
// 只限于传统注册方式使用(没有兼容问题)
// return false;
// DOM 方法
// 普通浏览器使用,IE678 不识别
// e.preventDefault();
// 低版本浏览器需要使用一个对象的属性
e.returnValue = false;
};
四、阻止事件冒泡
e.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>Document</title>
</head>
<body>
<div class="box">
<div class="son">son</div>
</div>
<script>
const box = document.querySelector('.box')
const son = document.querySelector('.son')
son.addEventListener('click', function (e) {
e.stopPropagation() // 阻止事件冒泡
console.log('son')
alert('son')
})
box.addEventListener('click', function () {
console.log('box')
alert('box')
})
</script>
</body>
</html>
五、常用的鼠标事件
(1)常用的鼠标事件
contextmenu 禁止鼠标右键菜单
主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
// 禁止鼠标右键菜单
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
});
selectstart 禁止鼠标选中
// 禁止鼠标选中
document.addEventListener("selectstart", function (e) {
e.preventDefault();
});
(2)鼠标事件对象
① e.clientX/e.clientY
鼠标距离浏览器窗口左上角的距离
所有浏览器都支持
② e.pageX/e.pageY
鼠标距离整个HTML文档页面左上顶点的距离,
IE8 以前不支持
③ e.screenX/e.screenY
鼠标距离电脑屏幕左上顶点的距离
IE8 以前不支持
案例:图片跟随鼠标移动效果
<!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>Document</title>
<style>
/* css 代码 */
* {
margin: 0;
padding: 0;
}
#pic {
/* fixed 参考元素:浏览器窗口 */
/* absolute 如果祖先都没有定位,参考body */
position: fixed;
}
</style>
</head>
<body>
<img src="../images/tianshi.gif" id="pic" />
<script>
var pic = document.getElementById("pic");
// 通过鼠标移动事件给图片添加 left 和 top 的值
// 给整个文档添加鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event;
var x = e.clientX;
var y = e.clientY;
// 给元素的 css 属性赋值
pic.style.left = x - 50 + "px";
pic.style.top = y - 40 + "px";
// 鼠标默认显示在图片左上角
// 其中 -50 和 -40 是减去图片长宽的一半,为了使鼠标显示在图片中心,
};
</script>
</body>
</html>
六、常用的键盘事件
(1)常用键盘事件
① onkeyup
某个键盘按键被松开时触发
② onkeydown
某个键盘按键被按下时触发
③ onkeypress
某个键盘按键被按下时触发
但它不识别功能键(ctrl、shift、箭头等)
注意:
如果使用 addEventListener 不需要加 on
三个事件的执行顺序是:keydown → keypress → keyup
(2)键盘事件对象
① key
可以得到按的是哪个键
比如:按下 a ,返回 a
② keyCode
返回该键的 ASCII 值,是属性
keyup 和 keydown 事件不区分字母大小写,例如:a 和 A 得到的都是65
keypress 事件区分字母大小写,例如:a 97 和 A 65
document.addEventListener("keydown", function () {
console.log("我按下了");
});
document.onkeyup = function () {
console.log("我弹起了");
};
document.addEventListener("keydown", function (e) {
console.log(e.keyCode); // 例如按键盘上的 a/A ,都返回 65
// 可以利用 keyCode 返回的 ASCII 码值来判断用户按下了哪个键
if (e.keyCode === 65) {
alert("您按下的a键");
} else {
alert("您没有按下a键");
}
});
document.addEventListener("keypress", function (e) {
console.log(e.keyCode); // 例如按键盘上的a得到97,A得到65
});
// 实际开发中,更多使用 keydown 和 keyup,它能识别所有的键(包括功能键)
// keypress 不识别功能键,但 keyCode 属性能区分大小写,返回不同的 ASCII 值