JavaScript——高级事件

JavaScript——高级事件

1. 目标

• 能够写出元素注册事件的两种方式
• 能够说出删除事件的两种方式
• 能够说出DOM事件流的三个阶段
• 能够利用事件对象完成跟随鼠标案例
• 能够封装阻止冒泡的兼容性函数
• 能够说出事件委托的原理
• 能够说出常用的鼠标和键盘事件

2. 注册事件

1. addEventListener（w3c标准，推荐方式，ie9之前的浏览器不支持，可使用attachEvent代替）
2. attachEvent

3. 删除事件

1. 方法一

let btn = document.querySelector('button');
btn.onclick = () => {
	alert('Hello World!');
	btn.onclick = null;
}

2. 方法二

let btn = document.querySelector('button');

let fn = () => {
    alert('Hello World!');
    btn.removeEventListener('click', fn);
}
btn.addEventListener('click', fn);

3. 方法三

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 常用键盘事件