目录
JavaScript——高级事件
1. 目标
- 能够写出元素注册事件的两种方式
- 能够说出删除事件的两种方式
- 能够说出DOM事件流的三个阶段
- 能够利用事件对象完成跟随鼠标案例
- 能够封装阻止冒泡的兼容性函数
- 能够说出事件委托的原理
- 能够说出常用的鼠标和键盘事件
2. 注册事件
- addEventListener（w3c标准，推荐方式，ie9之前的浏览器不支持，可使用attachEvent代替）
- attachEvent
3. 删除事件
- 方法一
let btn = document.querySelector('button');
btn.onclick = () => {
alert('Hello World!');
btn.onclick = null;
}
- 方法二
let btn = document.querySelector('button');
let fn = () => {
alert('Hello World!');
btn.removeEventListener('click', fn);
}
btn.addEventListener('click', fn);
- 方法三
let btn = document.querySelector('button');
let fn = () => {
alert('Hello World!');
btn.detachEvent('onclick', fn);
}
btn.attachEvent('onclick', fn);
3. DOM事件流
4. 事件对象
4.1 什么是事件对象
btn.onclick = (event) => {
console.log(event);
}
4.2 事件对象的常见属性和方法
-
e.target 和 this的区别
e.target是触发事件的对象元素
this是绑定事件的对象元素
比如ul中有li，你给ul绑定了点击事件，当你点击li的时候，e.target就是li，而this是ul -
阻止默认行为
e.preventDefault -
阻止事件冒泡
e.stopPropagation -
事件委托
原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器 -
禁止右键菜单
-
禁止选中文字
4.3 常用鼠标事件
- element.focus 元素获得焦点
4.4 常用键盘事件
