002_javaScript中事件的冒泡（Bubble）

来源：互联网发布：软件研发类期刊编辑：程序博客网时间：2024/06/06 09:06

- 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。

- 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消

- 可以将事件对象的cancelBubble设置为true，即可取消冒泡

-例子：

元素.事件 =function(event){

event= event || window.event;

event.cancelBubble= true;

};

测试代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#box1 {width: 200px;height: 200px;background-color: red;}#s1 {background-color: yellow;}</style><script type="text/javascript">window.onload = function() {var box1 = document.getElementById("box1");var s1 = document.getElementById("s1");var body = document.body;/* *  - 如此写法，点击span，会依次触发span、div、body、document。 *  - 事件的冒泡：某元素触发了x事件，其祖先的x事件会依次被触发。 *  - 事件的冒泡，看需求决定是否要取消。 *  - 取消事件冒泡：事件对象.cancleBubble = true; */s1.onclick = function(event) {event = event || window.event;alert("span");event.cancelBubble = true;//取消了span的事件冒泡，不会再传递给祖先}box1.onclick = function() {alert("div");}body.onclick = function() {alert("body");}document.onclick = function() {alert("document");}}</script></head><body><div id="box1">div<span id="s1">span</span></div></body></html>

阅读全文

0 0