在前面学习了按钮响应函数判断事件的来源,但是js里有一个值得注意的事件响应顺序问题。由于HTML的元素是树形结构排列,导致事件也是按树形发生的,也就是说树叶节点的事件会传送给父接点,依次传递上去,也就是逐级上传。比如HTML文档如下:
如果你单击了页面中的<div>元素,那么这个click 事件会按照如下顺序传播:
(1) <div>
(2) <body>
(3) <html>
(4) document
也就是说,click 事件首先在<div>元素上发生,而这个元素就是我们单击的元素。然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到document 对象。如下图所示:
由于这种特性,叫做事件冒泡(event bubbling)。因而在处理元素的事件响应时,就需要格外小心了,比如你只想点击body元素时才去改变页面的颜色,如果你不小心处理,就会发现点击body里任何元素都会触发这个事件响应。下面来通过代码来演示一下,如下:
既然有这种特性,那么有没有办法来区分这个事件是点击本身发生的,还是来源于子元素发生的?方法是有的,就是使用点击函数的event对象,而不是使用this对象。下面可以看到这两者的输出的区别:
另外,如果不想子元素的事件进行冒泡传递,可以在子函数里添加stopPropagation方法,如下:
event.stopPropagation();
http://edu.csdn.net/course/detail/2570
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果你单击了页面中的<div>元素,那么这个click 事件会按照如下顺序传播:
(1) <div>
(2) <body>
(3) <html>
(4) document
也就是说,click 事件首先在<div>元素上发生,而这个元素就是我们单击的元素。然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到document 对象。如下图所示:
由于这种特性,叫做事件冒泡(event bubbling)。因而在处理元素的事件响应时,就需要格外小心了,比如你只想点击body元素时才去改变页面的颜色,如果你不小心处理,就会发现点击body里任何元素都会触发这个事件响应。下面来通过代码来演示一下,如下:
<html>
<head>
<meta charset="utf-8">
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
</head>
<script>
$(document).ready (function() {
$("body").click(function(event) {
alert("body click");
console.log(event.target.nodeName);
console.log(this.nodeName);
});
$("span").click(function(event) {
alert("span click");
});
$("#msg").click(function(event) {
alert("div click");
//event.stopPropagation();
});
});
</script>
<body>
<span>
<div id="msg">测试事件的冒泡顺序</div>
</span>
</body>
</html>
当你点击字符串时,发现依次弹出"div click","span click","body click"的窗口显示。
既然有这种特性,那么有没有办法来区分这个事件是点击本身发生的,还是来源于子元素发生的?方法是有的,就是使用点击函数的event对象,而不是使用this对象。下面可以看到这两者的输出的区别:
另外,如果不想子元素的事件进行冒泡传递,可以在子函数里添加stopPropagation方法,如下:
event.stopPropagation();
这样这个事件就不会向父元素进行扩散传播了。