js中关于事件捕获与事件冒泡的小实验
1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
2.事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确target
3.DOM事件流:同时支持事件捕获与事件冒泡,事件捕获发生在事件冒泡之前,DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。
下图是DOM事件流中的事件捕获与事件冒泡过程:
js中事件监听方法总共有三种,分别如下所示:
- element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
- element.attachEvent(’on’ + type, listener); // IE6~10,IE11不支持
- element[’on’ + type] = function(){} // 所有浏览器
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行。
传统的element[’on’ + type] = function(){}与addEventListener(event,fn,useCapture)区别在于element[’on’ + type] = function(){}无法进行事件捕获,并且element[’on’ + type] = function(){}不支持对同一个元素的同一个事件注册多个事件监听器,后定义的事件会覆盖先定义的事件。
4.事件捕获的小实验,代码如下:
实验一:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: yellow;
} div{
background-color: red;
padding: 100px;
}
img{
padding: 50px;
} </style>
</head>
<body id="body">
<div id="div">
<img src="frame.gif" id="img" />
</div>
<script type="text/javascript">
function onBody(event){
console.log("event capture in body"); }
function onDiv(event){
console.log("event capture in div");
event.bubbles=true;
}
function onImg(event){
console.log("event capture in img");
event.bubbles=true;
}
window.onload=function(){
var aimg=document.getElementById("img");
aimg.addEventListener("click",onImg);
var adiv=document.getElementById("div");
adiv.addEventListener("click",onDiv);
var abody=document.getElementById("body");
abody.addEventListener("click",onBody,true);
}
</script>
</body>
</html>
这是一个简单的小实验,其中定义了三个function,分别为onDiv,onImg,onBody,其中onBody的第三个参数定义为true,说明该函数在事件捕获时执行。
在Chrome浏览器下,单击img部分得到的结果如下:
由于单击事件最直接的target是img,onbody添加了事件捕获时执行的函数,所以会输出第一行,第二行是事件直接触发img上的事件,输出第二行,第三行是事件冒泡时执行了定义在div上的函数,输出第三行。
实验二:
如果将onBody的addEventListener的第三个参数不添加或者改成false,那么onBody的函数就会在事件冒泡时执行,得到如下结果:
最新文章
- Java基础(一) ---- 封装(Encapsulation)
- [No000049]狗日的中年——姜文
- Effective Java 17 Design and document for inheritance or else prohibit it
- 【暑假】[深入动态规划]UVAlive 3983 Robotruck
- C#扫盲之:带你掌握C#的扩展方法、以及探讨扩展方法的本质、注意事项
- 如何通过Request.ServerVariables[";HTTP_USER_AGENT";]获取客户端操作系统信息
- PARTITION(number theory) ALSO Explosive number in codewars
- MvcMovieStore mvc5.0,EF6.01
- vc操作电脑之常用命令
- 《程序设计语言&mdash;&mdash;实践之路》【PDF】下载
- UIImage 内存细节
- ●HDU 3507 Print Article
- influxdb 全家桶运行
- ClickHouse之clickhouse-local
- Js 控制随机数概率
- grafna与饼状图
- MySQL 之 MHA + ProxySQL + keepalived 实现读写分离,高可用(二)
- Mybatis insert时返回自增id
- 2018年湘潭大学程序设计竞赛G又见斐波那契
- sql 中,如何获取两个日期之前月数、周数、天数