1.1 注册事件概述
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
- 利用on开头的事件 onclick
btn.onclick=function(){} - 特点：注册事件的唯一性（同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面的处理函数）
方法监听注册方式
- w3c标准推荐
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器 - 按注册顺序依次执行
1.2addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false。
2.1删除事件（解绑事件）
传统注册方式
evenTarget.onclick=null;
方法监听注册方式
1、envenTarget.removeEventListener(type,listener[,useCapture]);
2、envenTarget.detachEvent(eventNameWithOn,callback);
1
2
3
3.1DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
- 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
- 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
4.1事件对象
eventTarget.onclick=function(even){}
eventTarget.addEventListener('click',function(event){})
这里的event就是事件对象，我们还喜欢的写成e或者evt
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单解释：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
1、谁绑定了这个事件。
2、鼠标触发事件的话，会得到鼠标的相关信息，比如鼠标位置。
3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
4.1.1事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
| e.type | 返回事件的类型 比如click mouseover 不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准 ie6-8使用 |
| e.returnValue | 该属性阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转 |
| e.preventDefault() | 该方法阻止默认事件（默认行为） 标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
4.1.2 e.target
div {
width: 100px;
height: 100px;
background-color: pink;
}
123
- abc
- abc
- abc
4.1.3 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
4.1.4 阻止默认行为
// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
return false;
alert(11);
}
4.2 阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性，会带来的坏处也会带来好处
两种方式
- 标准写法：利用事件对象里面的stopPropagation()方法
- 非标准写法： IE6-8利用事件对象cancelBubble属性
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
son儿子
4.3 事件委托
事件委托也称事件代理，在jQuery里面称为事件委派
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
事件委托的作用
只操作了一次DOM，提高了程序的性能。
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
4.4 常见鼠标事件
禁用右键菜单 contextmenu
禁用选中文字 selectstart
我是一段不愿意分享的文字
4.5 鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent
body {
height: 3000px;
}
4.6 跟随鼠标的天使
img {
position: absolute;
top: 2px;
}
4.7 常用键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键按下时触发 但是它不识别功能键 比如ctrl shift箭头等 |
4.7.1键盘事件对象
keyCode可以返回ASCII码值
我们可以用keyCode返回的ASCII码值来判断用户按下了哪个键
注意：
- onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
- 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
- keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。
4.8京东按键输入内容案例
4.9模拟京东快递单号查询
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
123