相关阅读：

JavaScript事件学习总结(5)js中事件类型的鼠标事件。

//www . JB 51 . net/article/86259 . htm

JavaScript事件学习总结(一)事件流。

//www . JB 51 . net/article/86261 . htm

javaScript事件学习总结(4)事件的公共成员(属性和方法)。

//www . JB 51 . net/article/86262 . htm

JavaScript事件学习总结(2) js事件处理程序。

//www . JB 51 . net/article/86264 . htm

JavaScript事件学习总结(3) js事件对象。

一.事件。

事件是由用户或浏览器本身执行的操作，如单击、加载和鼠标悬停。

是javaScript和DOM之间的桥梁。

如果您触发，我将执行——事件，调用其处理程序并执行相应的JavaScript代码来给出响应。

典型的例子有：加载页面后触发加载事件；用户单击元素并触发单击事件。

二是事件流。

1.事件流的感知知识。

问题：点击一个页面元素，什么样的元素能感知这样的事件？

回答：当你点击元素时，你也点击了元素的容器元素，甚至是整个页面。

例子：有三个同心圆。将相应的事件处理程序添加到每个圆圈中，并弹出相应的文本。点击最内圆的同时点击外圆，那么外圆的点击事件也会被触发。

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head style # outer { position : absolute；宽度： 400 px；高度： 400 px；top:0left : 0；底部：0；right : 0；margin: auto背景-颜色：深粉色；} # middle { position : absolute；宽度： 300 px；高度：300 px；top :50%；左侧：50%；边距-left :-150 px；边距-top :-150 px；背景-color : deep sky blue；} # inner { position: absolute宽度： 100 px；高度：100 px；top :50%；左侧：50%；左边距：-50px；边距-top :-50px；背景-颜色：暗绿色；文本对齐：中心；线高： 100 px；颜色：白色；} #外侧，#中间，#内侧{ border-radius :100%；}/style body div id=' outer ' div id=' middle ' div id=' inner '点击我！/div/div/div script var inner circle=document . getelementbyid(' inner ')；inner circle . onclick=function(){ alert(' inner circle ')；};var middleCircle=document . getelementbyid(' middle ')；middleCircle . onclick=function(){ alert(' middleCircle ')；} var outcircle=document . getelementbyid(' outer ')；outcircle . onclick=function(){ alert(' outcircle ')；}/script/body/html具有以下效果：

2.事件流。

当事件发生时，它以特定的顺序在元素节点和根节点之间传播，路径经过的所有节点都将接收到该事件，这称为DOM事件流。

事件传播的顺序对应于浏览器的两个事件流模型：捕获事件流和冒泡事件流。

气泡事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。也就是从DOM树的叶子到树根。

捕获的事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。也就是从DOM树的根到叶。

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/headsdydiv id=' myDiv '点击我！/div/body/html在上面的html代码中，单击页面中的div元素。

在冒泡事件流中，点击事件传播的顺序是div-> body-> html-> document。

在捕获事件流中，点击事件传播的顺序是document-> html-> body-> div。

注释：

1)所有现代浏览器都支持事件冒泡，但是在具体实现上有一些不同：

IE5.5及更早版本中的事件冒泡将跳过html元素(直接从正文跳到文档)。

IE9、火狐、Chrome和Safari一路冒泡事件到窗口对象。

2)、IE9、火狐、Chrome、Opera、Safari都支持事件捕捉。虽然DOM标准要求事件应该从文档对象传播，但是这些浏览器从窗口对象捕获事件。

3)由于旧浏览器不支持，很少有人使用事件捕捉。建议使用事件冒泡。

DOM事件流

DOM标准采用捕获冒泡。两个事件流都会触发DOM的所有对象，从文档对象开始，到文档对象结束。

DOM标准规定事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标(div)在捕获阶段不会接收事件。也就是说，在捕获阶段，事件从文档到html再到正文停止。上图1~3。

在目标阶段：事件发生并在div上处理。但是事件处理可以被视为冒泡阶段的一部分。

气泡阶段：事件传播回文档。

注释：

1):DOM标准规定事件捕获阶段捕获与事件目标相关的事件，但在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本中，事件对象上的事件将在捕获阶段启动。因此，有两个机会来操纵目标对象上的事件。

2):不是所有的事件都会经历冒泡阶段。所有事件都将经过捕获阶段并处于目标阶段，但有些事件会跳过冒泡阶段：例如，获得输入焦点的焦点事件和失去输入焦点的模糊事件。

有两次机会对目标对象进行操作的事件示例：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head style # outer { position : absolute；宽度： 400 px；高度： 400 px；top:0left : 0；底部：0；right : 0；margin: auto背景-颜色：深粉色；} # middle { position : absolute；宽度： 300 px；高度：300 px；top :50%；左侧：50%；边距-left :-150 px；边距-top :-150 px；背景-color : deep sky blue；} # inner { position: absolute宽度： 100 px；高度：100 px；top :50%；左侧：50%；左边距：-50px；边距-top :-50px；背景-颜色：暗绿色；文本对齐：中心；线高： 100 px；颜色：白色；} #外侧，#中间，#内侧{ border-radius :100%；}/style body div id=' outer ' div id=' middle ' div id=' inner '点击我！/div/div/div script var inner circle=document . getelementbyid(' inner ')；内圈。addeventlistener ('click '，function(){ alert(' inner circle的click事件在捕获阶段触发')；}，真)；内圈。addeventlistener ('click '，function () {alert('冒泡阶段触发innercircle的click事件')；}，false)；var middleCircle=document . getelementbyid(' middle ')；中圈。addeventlistener ('click '，function(){ alert(' middle circle的click事件是在捕获阶段触发的')；}，真)；中圈。addeventlistener ('click '，function(){ alert(' middle circle的click事件在冒泡阶段触发')；}，false)；var outcircle=document . getelementbyid(' outer ')；外环。addeventlistener ('click '，function(){ alert(' outer cycle的click事件在捕获阶段触发')；}，真)；外环。addeventlistener ('click '，function(){ alert(' outer circle的click事件在冒泡阶段触发')；}，false)；/script/body/html的运行效果是六个框会相继弹出。为了说明这个原理，我把它整合成一个图表：

3.事件流——事件代理的典型应用。

在传统的事件处理中，需要为每个元素添加一个事件处理程序。Js是一种简单有效的技术，通过它可以将事件处理程序添加到父元素中，从而避免将事件处理程序添加到多个子元素中。

事件代理的原理是利用事件冒泡和目标元素，给父元素添加事件处理程序，等待子元素冒泡，父元素可以通过target(IE是srcElement)判断是哪个子元素，从而进行相应的处理。有关目标的更多信息，请参考javaScript事件学习总结(四)事件的公共成员(属性和方法)。

传统的事件处理，为每个元素添加一个事件处理程序，代码如下：

body ul id=' color-list ' lired/Lili orange/Lili黄色/Lili绿色/Lili blue/Lili indigo/Lili紫色/Li/ulscript(function(){ var color list=document . getelementbyid(' color-list ')；var colors=color list . getelementsbytagname(' Li ')；for(var I=0；icolors.lengthi ) { colors[i]。addEventListener('click '，showColor，false)；};函数show color(e){ e=e | | window . event；var TargetElement=e . target | | e . srcelement；alert(TargetElement . InnerHTML)；}})();/script/body事件代理，代码如下：

body ul id=' color-list ' lired/Lili orange/Lili黄色/Lili绿色/Lili blue/Lili indigo/Lili紫色/Li/ulscript(function(){ var color list=document . getelementbyid(' color-list ')；colorlist . addeventlistener(' click '，showColor，false)；函数show color(e){ e=e | | window . event；var TargetElement=e . target | | e . srcelement；if(TargetElement . NodeName . ToLowerCase()==' Li '){ alert(TargetElement . InnerHTML)；} }})();/script/body总结事件代理的优势：

将多个事件处理器减少到一个，因为事件处理器应该驻留在内存中，从而提高性能。想象一张100行的桌子。与传统的为每个单元格绑定事件处理程序和事件代理的方法(即在表中添加一个事件处理程序)相比，不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。

b、DOM更新不需要重新绑定事件处理程序，因为事件代理可以对不同的子元素采用不同的处理方式。如果添加其他子元素(a、span、div等。)，可以直接修改事件代理的事件处理函数，无需重新绑定处理器或再次循环。

以上是边肖介绍的JavaScript事件学习的总结(一)事件流的相关知识，希望对大家有所帮助！