阶段二javascript基础监听.pdfVIP

coderwhy认识（Event）

◼Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：

比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；

浏览器需要一条JavaScript代码和之间的桥梁；

当某个发生时，让JavaScript可以相应（执行某个函数），所以我们需要针对编写处理程序（handler）；

◼如何进行呢？

方式一：在script中直接（很少使用）；

方式二：DOM属性，通过元素的on来；

方式三：通过EventTarget中的addEventListener来；

coderwhy常见的列表

◼鼠标：

click——当鼠标点击一个元素时（触摸屏设备会在点击时生成）。

mouseover/mouseout——当鼠标指针移入/离开一个元素时。

mousedown/mouseup——当在元素上按下/释放鼠标按钮时。

mousemove——当鼠标移动时。

◼键盘：

keydown和keyup——当按下和松开一个按键时。

◼表单（form）元素：

submit——当者提交了一个form时。

focus——当者聚焦于一个元素时，例如聚焦于一个input。

◼Document：

DOMContentLoaded——当HTML的加载和处理均完成，DOM被完全构建完成时。

◼CSS：

transitionend——当一个CSS动画完成时。

coderwhy认识流

◼事实上对于有一个概念叫做流，为什么会产生流呢？

我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；

这是因为我们的HTML元素是存在父子元素叠加层级的；

比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；

coderwhy冒泡和捕获

◼我们会发现默认情况下是从最内层的span向外依次传递的顺序，这个顺序我们称之为冒泡（EventBubble）;

◼事实上，还有另外一种流的方式就是从外层到内层（body-span），这种称之为捕获（EventCapture）；

◼为什么会产生两种不同的处理流呢？

这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;

但是他们采用了完全相反的流来对进行了传递；

IE采用了冒泡的方式，Netscape采用了捕获的方式；

◼那么我们如何去捕获的过程呢？

coderwhy捕获和冒泡的过程

◼如果我们都，那么会按照如下顺序来执行：

◼捕获阶段（Capturingphase）：

（从Window）向下走近元素。

◼目标阶段（Targetphase）：

到达目标元素。

◼冒泡阶段（Bubblingphase）：

从元素上开始冒泡。

◼事实上，我们可以通过event对象来获取当前的阶段：

eventPhase

◼开发中通常会使用冒泡，所以捕获了解即可。

coderwhy对象

◼当一个发生时，就会有和这个相关的很多信息：

比如的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；

那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；

该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；

◼如何获取这个event对象呢？

event对象会在传入的处理（eventhandler）函数回调时，被系统传入；

我们可以在回调函数中拿到这个event对象；

◼这个对象中都有哪些常