【JS】395-重温基础:事件

【JS】395-重温基础:事件_第1张图片

本文是 重温基础 系列文章的第二十篇。

这是第三个基础系列的第一篇,欢迎持续关注呀!重温基础 系列的【初级】和【中级】的文章,已经统一整理到我的【Cute-JavaScript】(http://js.pingan8787.com)的JavaScript基础系列中。

本章节复习的是JS中的事件,事件冒泡捕获代理模拟等等。

前置知识:事件来实现的,是文档或浏览器窗口中发生的一些特定的交互瞬间。

1.事件流

事件流描述的是从页面中接收事件的顺序,通常有这样两种完全相反的事件流概念:事件冒泡流(IE团队提出)和事件捕获流(网景团队提出)。

1.1 事件冒泡

冒泡事件(Event Bubbling):事件开始时由最具体的元素接收(文档中嵌套层次最深的那个节点),然后逐层向上传播到较为不具体的节点(文档),看下示例代码:

	
	
	
    leo 事件冒泡	
	
	
    
点击

点击页面中 

元素,这个 click事件就会按照下面顺序传播:

  1. document

由此可见,元素绑定的事件会通过DOM树向上传播,每层节点都会发生,直到 document对象,如图展示了冒泡过程:【JS】395-重温基础:事件_第2张图片

1.2 事件捕获

事件捕获(Event Capturing):让不太具体的节点更早接收事件,而最具体的节点最后接收事件,即在事件到达预定目标之前捕获到,看下示例代码(HTML代码和前面一样),事件捕获的过程是这样的:

  1. document

看得出, document对象最新接收事件,然后沿DOM树依次向下,直到最后的实际目标 

元素,如图展示了捕获过程:

【JS】395-重温基础:事件_第3张图片

注意:由于老版本的浏览器不支持,因此很少人使用事件捕获,不过如果特殊需求还是可以使用事件捕获,建议还是使用事件冒泡。

1.3 DOM事件流

“DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段

【JS】395-重温基础:事件_第4张图片

在DOM事件流中,实际目标( 

元素)在捕获阶段不接收事件,即在捕获阶段,事件从 document对象到 再到 后就停止,进入“处于目标”阶段,事件在 
元素上发生,然后才进入冒泡阶段,将事件传回给文档。

注意:目前主流浏览器都支持DOM事件流,只有IE8和之前版本不支持。

2.事件处理

事件处理,即响应某个事件。我们把事件处理的函数,称为“事件处理程序”。on开头,如 click事件的事件处理程序就是 onclick, load事件的事件处理程序就是 onload

  • HTML事件处理程序

  • DOM0级事件处理程序

  • DOM2级事件处理程序

  • IE事件处理程序

  • 跨浏览器事件处理程序

2.1 HTML事件处理程序

某个元素支持的事件,都可以用一个与相应事件处理程序同名的HTML特性来指定,这个特性的值应该是能够执行的JavaScript代码。比如:

也可以把需要执行的具体事件单独定义出来,可以放置与单独 .js文件,也可以在文档内用 

你可能感兴趣的:(【JS】395-重温基础:事件)