JS基础编程课件12_JavaScript的事件监听.pdf

JavaScript的事件处理

王红元coderwhy

目录

1认识事件处理

content

2事件冒泡捕获

3事件对象event

4EventTarget使用

5事件委托模式

6常见的事件

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对象来获取当前的阶