事件高级
1 绑定和解绑事件
1.1 绑定事件
给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式
（1）传统注册方式： 利用 on 开头的事件 onclick
特点：注册事件唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
（2）addEventListener 方法监听注册方式： addEventListener() 方法
特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
方法和参数
eventTarget.addEventListener(type, listener, useCapture)；
- type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是 false。
btn.addEventListener('click', function() {
alert('hello world');
});
1.2 解绑事件
传统的监听解绑用eventTarget.onclick = null;， 方法监听注册方式用removeEventListener
eventTarget.removeEventListener(type, listener, useCapture)
<body>
<div>点我</div>
<div>点我</div>
<script>
var divList = document.getElementsByTagName('div');
divList[0].onclick = function() {
alert(111);
this.onclick = null;
}
divList[1].addEventListener('click', fun);
function fun() {
alert(222);
this.removeEventListener('click', fun);
}
</script>
</body>
1.3 DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件,DOM 事件流分为3个阶段：
- 捕获阶段: 由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程
- 当前目标阶段
- 冒泡阶段 : 事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程
注意：
- JS 代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener第三个参数如果是 true，表示在事件捕获阶段。用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件
下面是先son后father, 因为是冒泡的
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
var parent = son.parentElement;
son.addEventListener('click', function() {
alert('son');
});
parent.addEventListener('click', function() {
alert('father');
});
</script>
</body>
是先father后son, 因为是冒泡的
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
var parent = son.parentElement;
son.addEventListener('click', function() {
alert('son');
}, true);
parent.addEventListener('click', function() {
alert('father');
}, true);
</script>
</body>
2 事件对象
2.1 什么是事件对象
代码里的event 就是事件对象，我们还喜欢的写成 e 或者 evt
div.onclick = function(event) {
console.log(event);
}
div.addEventListener('click', function(event) {
console.log(event);
})
event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
事件对象有兼容性问题，ie678通过windows.event, 兼容性写法：e = event || windows.event
2.2 事件对象的常见属性和方法
例如，阻止链接跳转
// 阻止默认行为，让链接不跳转，或让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
// 阻止跳转行为
e.preventDefault();
})
阻止链接冒泡
e.stopPropagation()
2.3 事件委托（代理、委派）
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
<ul>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
</ul>
如果要点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。利用事件委托可以给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert('知否知否，应是绿肥红瘦');
e.target.style.backgroundColor = 'pink';
})
</script>
2.4 常用的鼠标事件
2.4.1 基础鼠标事件
2.4.2 禁止鼠标选中文字和右键菜单
<script>
// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
</script>
2.4.3 鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要是用鼠标事件对象PointerEvent 和键盘事件对象 KeyboardEvent。
2.4.3.1 e.target和this区别
e.target返回的是触发事件的对象， this返回的是绑定事件对象
<script>
// e.target返回的是触发事件的对象， this返回的是绑定事件对象
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
console.log(e.target); // li
console.log(this); // ul
})
</script>
2.4.3.2 鼠标事件对象属性
2.4.3.3 跟随鼠标的天使
<style>
img {
position: absolute;
}
</style>
<body>
<img src="images/angel.gif">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
img.style.left = x - 50 + 'px';
img.style.top = y - 40 + 'px';
})
</script>
</body>
2.5 常用的键盘事件
2.5.1 常用的键盘事件
- keyup : 某个键盘弹起时
- keydown： 某个键盘按下时
- keypress： 非功能键按下时
三个键盘事件执行顺序是：keydown -- keypress --- keyup
<body>
<script>
document.addEventListener('keyup', function() {
console.log('键盘弹起');
});
document.addEventListener('keydown', function() {
console.log('键盘按下');
});
document.addEventListener('keypress', function() {
console.log('非功能键按下');
});
</script>
</body>
2.5.2 键盘事件对象
keyCode: 返回该键的ascall值
- keyup和keydown的keyCode不区分大小写，'a’和’A’都是65
- keypress的keyCode区分大小写，'a’是65, 'A’是97
- 在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
2.5.3 模拟京东按键输入内容
当按下 s 键， 光标就定位到搜索框
<body>
<div class="search">
<input placeholder="打印机">
<button>搜索</button>
</div>
<script>
var input = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if(e.keyCode === 83) {
input.focus();
}
})
</script>
</body>