JavaScript 高级事件学习

Posted 2021-06-21 GoldenaArcher

javascript 高级事件学习

JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) p247-262 的内容，包含了以下特性：

1. 三种注册事件的方法，包含一种对 IE9 的兼容
2. 三种解绑事件的方法，包含一种对 IE9 的兼容
3. DOM 事件流
4. 事件对象
5. 阻止事件冒泡
6. 事件委托
7. 常用的鼠标事件
8. 常用的键盘事件

搭配 学习案例 食用更佳

注册事件（绑定事件）

注册事件 就是 给元素添加事件。

传统注册方式

特点：

• 利用 on 开头事件，如 onclick

• 注册事件的唯一性

  同一个元素的同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

特性：

• w3c 标准，推荐方式

• 是一个叫 addEventListener() 的方法

  IE9 虽然以前可以用 attachEvent() 代替，但是 非标准，不建议使用

• 同一个元素可以注册多个监听器，且按序执行

使用方法：

• 语法

  eventTarget.addEventListener(type, listener[, useCapture]);

• 参数

  • type

    事件类型字符串，比如 click, mouseover, 不带 on

  • listener

    事件处理函数，事件发生时就会调用此函数

  • useCapture

    可选参数，在事件流阶段有更加具体一点都描述

绑定事件兼容性解决方案

仅作为了解使用

function addEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持 addEventListener
  if (element.addEventListener) {
    element.addEventListener(eventName, fn);
  } else if (element.attachEvent) {
    element.attachEvent(`on${eventName}`, fn);
  } else {
    // 相当于 element.onclick = fn;
    element[`on${eventName}`] = fn;
  }
}

删除事件（解绑事件）

当事件绑定之后就可以频繁且多次的触发事件，但是在有些情况下会存在只允许触发一次事件的情况——例如说买东西，点了付款之后肯定是要在交易完成之前不允许顾客继续点击付款按钮，否则就可能会重复购买。

这时候就需要用到解绑事件了。

传统解绑方式

这个相对而言比较简单，就是在触发了绑定事件后，将当前事件指向 null 即可。

方法监听解绑方式

与使用方法监听注册方式一样，使用方法监听解绑方式也会出现兼容性的问题。在 IE9 以前的版本可以使用 detachEvent() 进行解绑

对于 addEventListener 来说，需要先将点击事件的方法抽离出来，在点击时间内进行解绑：

function fn() {
  console.log("divs[1] registered once");
  divs[1].removeEventListener("click", fn);
}

// 调用不需要加小括号
divs[1].addEventListener("click", fn);

解绑事件兼容性解决方案

代码与 绑定事件兼容性解决方案 相似，修改对应方法名和值即可。

DOM 事件流

事件流 - 描述从页面中接收事件的顺序

DOM 事件流 - 事件发生时在元素节点之间按照特定的顺序进行传播的过程

图例：

DOM 事件流分为三个阶段：

1. 捕获阶段

   从大到小，从根节点往向目标阶段追溯

2. 当前目标阶段

3. 冒泡阶段

   从小到大，从当前目标阶段向根节点追溯

注意：

1. JavaScript 代码中只能执行捕获或是冒泡其中一个阶段

2. onclick 和 attachEvent 只能得到冒泡阶段

3. addEventListener(type, listener[, useCapture]); 第三个参数如果是 true，表示在事件捕获阶段调用时间处理程序

   如果是 false，即默认值，表示在事件冒泡阶段调用事件处理程序

4. 实际开发中更加注重事件冒泡，事件捕获很少使用

5. 有些时间是没有冒泡的，如 onblur, onfocus, onmouseenter, onmouseleave

6. 事件冒泡是把双刃剑，用得不好会带来麻烦——如在案例中实现的那样点击子元素，父元素和 document 元素都会有连锁反应；用得好的话也能利用这些特性解决一些问题

事件对象

事件对象的属性：

1. event 就是事件对象，写入监听函数的小括号中作为形参
2. 事件对象 只有有了事件才会存在
3. 事件对象 是系统自动创建的，默认不需要手动创建
4. 事件对象 是事件的一系列相关数据的集合，有很多的属性和方法
5. 事件对象 可以自行命名，如 event, evt, e
6. 兼容问题 -> ie 6 7 8，兼容性的写法需要用 window.event 调用

常用的属性

• e.target, 返回触发事件的元素

  e.target 返回的是触发事件的元素，this 返回的是绑定事件的元素

  依旧有兼容性的问题，使用以下代码代替：

  e = e || window.event;
  var target = e.target || e.srcElement;
  

  srcElement 是一个非标准的属性，可以在 ie6-8 中使用

  注：currentTarget 与 this 的行为习惯较为相似

• e.type

  返回事件类型

• e.preventDefault

  阻止事件的默认行为，DOM 标准写法

  低版本浏览器可以使用以下两种方式阻止默认行为

  • returnValue

  • return false;

    缺点：

    1. return 之后的代码不会执行
    2. 只限于用传统的注册方式

• e.stopPropagation

  阻止事件冒泡

  依旧是兼容性的问题，可以使用 window.event.cancelBubble = true;

事件委托（代理、委派）

原理：不是每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后里有冒泡原理影响每个子节点

作用：只操作了一次 DOM，提高了程序性能

使用 e.target 还是可以对被触发的元素进行操作

鼠标事件

常用的鼠标事件

• onclick，点击事件
• onmouseover，鼠标经过触发
• onmouseout，鼠标离开触发
• onfocus，获得鼠标焦点触发
• onblur，失去鼠标焦点触发
• onmousemove，鼠标移动触发
• onmouseup，鼠标弹起触发
• onmousedown，鼠标按下触发

鼠标事件对象

event 对象代表事件的状态，根事件相关的一系列信息的集合。现阶段我们主要是用鼠标对象 MouseEvent 和键盘事件对象 KeyboardEvent

常用的鼠标事件对象有：

• e.clientX，返回鼠标相对于 浏览区可视窗口 的 X 坐标
• e.clientY，返回鼠标相对于 浏览区可视窗口 的 Y 坐标
• e.pageX，返回鼠标相对于 文档页面 的 X 坐标，IE9 以上才支持
• e.pageY，返回鼠标相对于 文档页面 的 Y 坐标，IE9 以上才支持
• e.screenX，返回鼠标相对于 电脑屏幕 的 X 坐标
• e.screenY，返回鼠标相对于 电脑屏幕 的 Y 坐标

常用的键盘事件

键盘事件对象中的 keyCode 属性可以获得相应键的 ASCII 码值

• onkeyup

  • 当 按键 弹起的时候触发
  • 不区分大小写，例如 ‘a’ 与 ‘A’ 取值相同，均为 65
  • 感觉相对而言使用更加频繁

• onkeydown

  • 当 按键 按下的时候触发
  • 不区分大小写，例如 ‘a’ 与 ‘A’ 取值相同，均为 65

• onkeypress

  • 当 按键 按下的时候触发，但是不识别功能键，例如 ctrl, shift, arrow 等
  • 区分大小写，例如 ‘a’ 与 ‘A’ 取值不同，‘a’ 为 97, 'A’为 65

运行顺序：down -> press -> up