直接步入正题，今天老师剖析了一下js中的addEventListener中一些常用的以及好用事件。

addEventListener

• 内部的三个参数

1. type: 第一个参数表示监听事件类型的字符串。比如click，mouseover
2. listener: 用来监听处理的函数方法
3. useCapture: 默认是false，时间冒泡，设置为true的时候是事件捕获。

• 事件的传递过程 先说一下原理性的知识。一个事件发生时会分成三个阶段。

1. 捕获阶段

从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了，且addEventListener中第三个参数为true，调用该事件处理程序。

2. 目标阶段

触发在目标对象本身注册的事件处理程序，也被称作正常事件派发阶段。

3. 冒泡阶段

从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，且addEventListener中第三个参数为false,则调用该事件处理程序。

事件(type)

• 鼠标类

  • click: 点击触发(鼠标按下并松开)

  • mousedown: 鼠标按下

  • mouseup: 鼠标松开

  • mouseenter: 鼠标滑进

  • mouseleave: 鼠标滑出

  • mouseover: 鼠标滑进

  • mouseout: 鼠标滑出

  • mousemove: 鼠标移动(只要在元素中移动会一直触发)

不难看出有两个鼠标滑进和滑出，给大家解释一下区别。mouseenter和mouseleave是一组，鼠标只作用与元素本身，不会冒泡。而另外两个鼠标会作用于元素本身及元素的子元素，是一个重复触发，冒泡过程。

• 键盘类

  • keydown: 按下键盘上所有键都会触发
  • keypress: 按下所有键都会触发(但是可以检测到按的是哪一个按键)
  • keyup: 松开按键会触发。

里面有一个很重要的小知识点就是keyCode，每个按键都有一个独一无二的keyCode来识别我们按下了哪一个键。他非常实用，比如我们平时在各大网站登录时习惯按回车，也是给登录按钮绑定了keyCode。

• UI类

  • load: 加载
  • unload: 重载
  • resize: 改变浏览器尺寸
  • scroll: 使用滚动条

这四个的用法我也不太清楚，确实也没有使用过，老师也没有过多记述，等熟悉之后再和大家分享。

总结

虽然今天看的东西不多，但是很常用，需要很多的实践来完成。由于这两天看的东西不怎么多，明天周结可能也会有一些知识点，再讲讲这一周的心理历程。今就到这了，加油大家。