【重温基础】20.事件

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

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

今日感受:电影有时候看的是缘分。

系列目录:

  • 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
  • 【重温基础】1-14篇
  • 【重温基础】15.JS对象介绍
  • 【重温基础】16.JSON对象介绍
  • 【重温基础】18.相等性判断
  • 【重温基础】19.闭包

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

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

1.事件流

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

1.1 事件冒泡

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


<html>
<head>
    <title>leo 事件冒泡title>
head>
<body>
    <div id="leo">点击div>
body>
html>

点击页面中

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

  1. document

由此可见,元素绑定的事件会通过DOM树向上传播,每层节点都会发生,直到document对象,如图展示了冒泡过程:

1.2 事件捕获

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

  1. document

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

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

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

1.3 DOM事件流

“DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段
事件捕获为截获事件提供机会,然后实际的目标接收到事件,最后事件冒泡,对事件作出响应。按照前面的HTML代码,整个流程是这样的:

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

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

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

2.事件处理

事件处理,即响应某个事件。我们把事件处理的函数,称为“事件处理程序”。
事件处理程序的名称一般都以on开头,如click事件的事件处理程序就是onclickload事件的事件处理程序就是onload
我们将事件处理程序,分为这么几类:

  • HTML事件处理程序
  • DOM0级事件处理程序
  • DOM2级事件处理程序
  • IE事件处理程序
  • 跨浏览器事件处理程序

2.1 HTML事件处理程序

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

<input type="button" value="点击" onclick="alert('hello leo');">

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

你可能感兴趣的:(3-JavaScript,Cute-JavaScript)