JS让前端飞JS底层原理及必备知识点收录

JS—事件流

2014-12-14  本文已影响934人  Miss____Du

事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。

DOM3级事件,规定了以下几类事件
*UI事件:当用户与页面上的元素交互时发生触发。
*焦点事件:当元素获得或失去焦点时触发。
*鼠标事件:当使用鼠标滚轮时触发。
*文本事件:当在文档中输入文本时触发。
*键盘事件:当用户通过键盘在页面上执行操作时触发。
*合成事件:当为输入法编辑器输入字符时触发。
*变动事件:当底层dom结构发生变化时触发。
*除去这几类事件外,HTML5也定义了一组事件,而有些浏览器还会在DOM与BOM中实现其他的专有事件。
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件,包括IE9在内的所有主流浏览器都支持DOM2级事件。IE9开始也都支持DOM3级事件。
我没有逐个版本进行测试,但是觉得IE9都支持了,其他浏览器也应该都支持吧。可能会有某个特别事件不支持,遇到,记住了就可以。

黄:div1,粉:div2,内红边框:body,外红边框:html

需要补充的是,html上层的祖先元素,分别是document,window。
document.onclick=function(){alert("doc")}//接html window.onclick=function(){alert('win')}//接doc
dom2级事件规范要求从doc开始,但是大部分浏览器实现从window开始。
* DOM事件流—三个阶段
事件捕获阶段,处于目标阶段,事件冒泡阶段。
虽然dom事件流,将这三个阶段分开,但是IE9即其他浏览器支持这样的实现机制:
1、捕获阶段会触发目标元素上的事件。
2、冒泡阶段会从目标元素的事件触发。

【总结】在js实现时,会根据网页的需求,有前端工程师决定是选择冒泡还是捕获。

上一篇下一篇

猜你喜欢

热点阅读