jQuery 事件流的概念
jQuery 事件流的概念
什么是事件流
DOM事件流
1. 事件捕获阶段;
2.处于目标阶段;
3.事件冒泡阶段;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script> window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false); document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false); document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false); document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false); }; </script>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
1, addEventListener
addEventLIstener 是DOM2级事件新增的指定事件处理程序的操作, 这个方法接受3个参数: 要处理的事件名,作为事件处理程序的函数和一个布尔值. 最后这个布尔值参数如果是true, 表示在捕获阶段调用事件处理程序; 如果是false, 表示在冒泡阶段调用事件处理程序.
2, document、documentElement和document.body三者之间的关系:
document代表的是整个html页面;
document.documentElement代表的是<html>
标签;
document.body代表的是<body>
标签;
接着我们就来聊聊上面的例子中输出的结果为什么是这样:
在标准的“DOM2级事件”中规定,事件流首先是经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段。这里可以画个图示意一下:
首先在事件捕获过程中,document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标,就是id为btn的a标签。
接着在事件冒泡过程中,事件开始时由最具体的元素(a标签)接收,然后逐级向上传播到较为不具体的节点(document)。
需要注意的点:由于老版本的浏览器不支持事件捕获,因此在实际开发中需要使用事件冒泡,在由特殊需要时再使用事件捕获
补充知识了解即可:
1、IE中的事件流只支持“事件冒泡”,但是版本到了IE9+以后,实现了“DOM2级事件”,也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。
2、在DOM事件流中,实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发,并在事件处理中被看成“冒泡阶段”的一部分。然后,“冒泡阶段”发生,事件又传播回文档。
最新文章
- https 安全验证问题
- JMeter学习-022-JMeter 分布式测试(性能测试大并发、远程启动解决方案)
- Third-person Camera Navigation
- Java 中文字符串编码之GBK转UTF-8
- UIScrollView详解
- 详细剖析电脑hosts文件的作用和修改
- stretchableImageWithLeftCapWidth 的使用方法
- LR_问题_无法打开IE浏览器、监视服务器资源
- [未完成]关于CSS的总结
- .NET DataGrid 导出Excel 无分页
- WITH+HInt MATERIALIZE 不见得有效
- Cocos2d-X在SwitchControl使用
- 不一样的味道--Html和Xml解析、格式、遍历
- nginx内置全局变量
- django models的点查询/跨表查询/双下划线查询
- 深度解密Go语言之Slice
- Redis的过期策略和内存淘汰机制
- vue中使用scss
- 异常 java.net.ConnectException: Connection refused: no further information
- 恢复word中审阅选项卡