事件高级（作为学习笔记）
目录
- 学习目标
- 1. 注册事件（绑定事件）
- 1.1 注册事件概述
- 1.2 addEventListener 事件监听方式
- 1.3 attachEvent（IE9以后的都不支持了）
- 2. 删除事件（解绑事件）
- 3. DOM事件流
- 4. 事件对象
- 5. 阻止事件冒泡
- 5.1阻止事件冒泡的两种方法
- 5.2 阻止事件冒泡的兼容性解决方案
- 6. 事件委托（代理，委派）
- 6.1. 事件委托
- 6.2. 事件委托的原理
- 6.3 事件委托的作用
- 6.4 栗子
- 7. 常用的鼠标事件
- 7.1常用的鼠标事件
- 7.2 鼠标事件对象
- 8. 常用的键盘事件
- 8.1 事件除了使用鼠标触发，还可以使用键盘触发
- 8.2 键盘事件对象
- 8.3 案例
学习目标
- 能写出元素注册事件的两种方式
- 能够说出删除事件的两种方式
- 能够说出 DOM 事件流的三个阶段
- 能够利用事件对象完成跟随鼠标案例
- 能够封装阻止冒泡的兼容性函数
- 能够说出事件委托的原理
- 能够说出常用的鼠标和键盘事件
1. 注册事件（绑定事件）
1.1 注册事件概述
给元素添加事件，称为注册事件或者绑定事件 。
注册事件有两种方式：传统方式和方法监听注册方式。
| 传统注册方式 | 方法监听注册方式 |
|---|---|
| 利用 on 开头的事件 onclick | W3C 标准 推荐方式 |
|
addEventListener()它是一个方法 |
| btn.onclick = function(){} | IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替 |
| 特点注册事件的唯一性 | 特点：同一个元素同一个事件可以注册多个监听器 |
| 同一个元素同一个事件只能设置一个注册函数，最后注册的处理函数将会覆盖前面注册的处理函数 | 按注册顺序依次执行 |
var e = e || window.event; //标准化事件对象
1.2 addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener() 方法值将指定的监听器注册到eventTarget（目标对象） 上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type：事件类型字符串，比如click，mouseover，注意这里不要带 on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，我们在进一步学
栗子：
<body>
<button>传统注册方式button>
<button>方法监听注册事件button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {
alert('How are you!');
}
btns[0].onclick = function() {
alert('Welcome to China!');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
alert('Welcome to China!');
})
btns[1].addEventListener('click', function() {
alert('Welcome to xinjiang!');
})
script>
body>
1.3 attachEvent（IE9以后的都不支持了）
eventTarget.attachEvent(“onclidk”, function(){})
IE都嫌弃，了解一下就行，想要看的查百度吧。。。
2. 删除事件（解绑事件）
https://blog.csdn.net/weixin_45773503/article/details/106005237
3. DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流
注意：
- JS 代码中只能执行捕获或者冒泡的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture])第三个参数如果是 true， 表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示事件冒泡阶段调用事件处理程序
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
- 有些事件是没有冒泡的，比如 onblur，onfocus，onmouseover，onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情。
4. 事件对象
| 事件对象的常见属性和方法 | 说明 |
|---|---|
| e.target | 返回触发事件的类型 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
| e.type | 返回事件的类型 比如 click mouseover 不带 on |
| e.cancelBubble | 该事件阻止冒泡 ie6-8使用 |
| e.returnValue | 该属性阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转 属性 |
| e.preventDefault | 该方法 阻止默认事件（默认行为）标准 比如不让链接跳转 方法 |
| e.stopPropagation | 阻止冒泡 |
<body>
<div>divdiv>
<a href="http://www.baidu.com">百度a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
form>
<script>
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// 2. 阻止默认行为（事件） 让链接不跳转 或者不让他提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault();
})
// 3. 传统的注册方式
a.onclick = function(e) {
alert('帅');
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 属性
e.returnValue;
// 我们可以利用return false 也能阻止默认行为
return false;
}
script>
body>
5. 阻止事件冒泡
5.1阻止事件冒泡的两种方法
- e.stopPropagation(); 停止冒泡
- e.cancelBubble = ture; 非标准 ie6-8
<body>
<div class="father" style="width: 100px; height: 100px; background-color: antiquewhite;">
<div class="son" style="width: 50px; height: 50px; background-color:red">sondiv>
div>
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
// e.stopPropagation(); //停止冒泡
// e.cancelBubble = ture; // 非标准
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
});
script>
body>
5.2 阻止事件冒泡的兼容性解决方案
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = ture;
}
6. 事件委托（代理，委派）
6.1. 事件委托
事件委托也称为事件代理，在jQuery中称为事件委派。
6.2. 事件委托的原理
不是每个子节点单独设置事件监听器，而是在其父节点上设置事件监听器，然后利用冒泡来影响设置每个子节点
6.3 事件委托的作用
我们只操作了一次DOM，提高了程序的性能。
6.4 栗子
<body>
<ul>
<li>事件委托li>
<li>事件委托li>
<li>事件委托li>
<li>事件委托li>
<li>事件委托li>
ul>
<script>
var ul = document.querySelector('ul')
var li = ul.children;
console.log(li);
ul.onclick = function(e) {
// alert('I Love China!');
for (var i = 0; i < ul.children.length; i++) {
li[i].style.backgroundColor = '';
}
e.target.style.backgroundColor = "pink";
}
script>
body>
7. 常用的鼠标事件
7.1常用的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onmousemove | 鼠标移动触发 |
| onmouseenter | 鼠标经过触发 |
| onmouseleave | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
<body>
无法复制的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
alert('请尊重劳动成果');
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
script>
body>
document.oncontextmenu = function(e){
e.preventDefault();
};
document.getElementById("test").onmousedown = function(e){
if(e.button ==2){
alert("你点了右键");
}else if(e.button ==0){
alert("你点了左键");
}else if(e.button ==1){
alert("你点了滚轮");
}
}
7.2 鼠标事件对象
event 对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段主要是事件对象
MouseEvent 和键盘事件 KeyboardEvent。
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区域的 X 坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区域的 Y 坐标 |
| e.pageX | 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的 Y 坐标 |
<body>
无法复制的文字
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function() {
// 1. client 鼠标在可视区域的 x 和 y 的坐标
console.log(e.clientX);
console.log(e.clientY);
console.log("------------------------");
// 2. page 鼠标在页面文档中的 x 和 y 坐标
console.log(e.pageX);
console.log(e.pageY);
console.log("------------------------");
// 3. screen 鼠标在电脑屏幕的 x 和 y 坐标
console.log(e.screenX);
console.log(e.screenY);
})
script>
body>
案例：
- 鼠标跟随天使
8. 常用的键盘事件
8.1 事件除了使用鼠标触发，还可以使用键盘触发
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 （先执行这个） |
| onkeypress | 某个键盘按键被按下时触发 但是不识别功能键 比如 ctrl shift 箭头等 |
注意：
- 如果使用addEventListener 不需要加 on
- onkeypress 和前面两个的区别是，他不识别功能键，比如左箭头，shift 等
- 三个事件的执行顺序是：keydown --> keypress --> keyup
<body>
<script>
// 1. 键盘按下时触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
// 2. 键盘弹起时触发
document.addEventListener('keydown', function() {
console.log('我按下了');
})
// 3. keypress 按键按下时触发
document.addEventListener('keypress', function() {
console.log('我按下了keypress');
})
script>
body>
8.2 键盘事件对象
| 键盘事件对象 属性 | 说明 |
|---|---|
| keyCode | 返回该键的 ASCLL 值 |
<script>
document.addEventListener("keydown", function(e) {
var a = e.keyCode;
console.log(a);
})
</script>
注意：
- onkeydown 和 onkeyup 不区分大小写，onkeypress 区分字母大小写。
- 在实际开发中，我们更多的使用 keydown 和 keyup，它能识别所有的键（包括功能键）
- Keypress 不识别功能键，但是keyCode区分大小写，返回不同的ASCLL码值
8.3 案例
- 模拟京东按键输入内容