JS—事件流
事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
DOM3级事件,规定了以下几类事件
*UI事件:当用户与页面上的元素交互时发生触发。
*焦点事件:当元素获得或失去焦点时触发。
*鼠标事件:当使用鼠标滚轮时触发。
*文本事件:当在文档中输入文本时触发。
*键盘事件:当用户通过键盘在页面上执行操作时触发。
*合成事件:当为输入法编辑器输入字符时触发。
*变动事件:当底层dom结构发生变化时触发。
*除去这几类事件外,HTML5也定义了一组事件,而有些浏览器还会在DOM与BOM中实现其他的专有事件。
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件,包括IE9在内的所有主流浏览器都支持DOM2级事件。IE9开始也都支持DOM3级事件。
我没有逐个版本进行测试,但是觉得IE9都支持了,其他浏览器也应该都支持吧。可能会有某个特别事件不支持,遇到,记住了就可以。
-
那些我们熟悉的事件
onclick
onmouseover
onmouseout
onfocus
…… -
事件流
<html onclick="alert('我是html')" >
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onclick="alert('我是body')" >
<div id="div2" onclick="alert('我是第二个div')" >
<div id="div1" onclick="alert('我是第一个div')"></div> </div> </body> </html>
-
事件触发顺序
当单击第一个div时,及黄色的那个。
第一个是:我是第一个div;
第二个是:我是第二个div;
第三个是:我是body;
第四个是:我是html;
在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。 -
事件流的概念
描述的是从页面中接收事件的顺序。
但是早期IE与Netscope却以相反的思路解释了事件流。 - IE—冒泡
IE的事件流叫做事件冒泡,即当一个元素(目标元素)的事件被触发后,比如说,鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发,这一过程被称为事件冒泡。这个事件从原始元素开始,一直冒泡到DOM树的最上层(document)。
所有现代浏览器都支持事件冒泡,除了网景,大部分浏览器默认的事件流机制也是冒泡,例如上例。 - Netscope—捕获
事件捕获的思想是目标元素的组先元素应该更早的接收到事件。而目标元素应该最后一个接收到事件。
所以警告框的显示结果应该与上面的代码相反。
现在IE9,还有其他浏览器也都支持这种事件流模型。
需要补充的是,html上层的祖先元素,分别是document,window。
document.onclick=function(){alert("doc")}//接html window.onclick=function(){alert('win')}//接doc
dom2级事件规范要求从doc开始,但是大部分浏览器实现从window开始。
* DOM事件流—三个阶段
事件捕获阶段,处于目标阶段,事件冒泡阶段。
虽然dom事件流,将这三个阶段分开,但是IE9即其他浏览器支持这样的实现机制:
1、捕获阶段会触发目标元素上的事件。
2、冒泡阶段会从目标元素的事件触发。
【总结】在js实现时,会根据网页的需求,有前端工程师决定是选择冒泡还是捕获。