javascript事件冒泡

来源：互联网发布：数据库开发工程师招聘编辑：程序博客网时间：2024/06/11 20:51

一事件

在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。

浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程进行了解，这将有助于更好地理解以下的内容。

二冒泡机制

在javascript中，冒泡机制和在算法数据结构中的概念是不一样的。在这里主要的反馈的是事件流过程中事件捕获后的一个冒泡反馈的过程。

正如这张图看到的，这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层层层往上传递，直至传递到dom的根节点。

也就是如下图

在这里，我写个简单的案例进行分析下；

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>事件冒泡案例</title><style type="text/css">body{padding: 0;margin:0;}div{padding: 100px;}</style></head><body><div style="background:#ccc;"><div style="background:#808008;"><div style="background:red;"></div></div></div></body></html>

跟着为其添加点击事件

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>事件冒泡案例</title><style type="text/css">body{padding: 0;margin:0;}div{padding: 100px;}</style></head><body><div style="background:#ccc;" onclick="alert('能冒泡到最顶层');"><div style="background:#808008;" onclick="alert('能冒泡到中间层div');"><div style="background:red;" onclick="alert('能冒泡到里层');"></div></div></div></body></html>

一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息，

b.终止事件的冒泡

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>事件冒泡案例</title><style type="text/css">body{padding: 0;margin:0;}div{padding: 100px;}</style><script type="text/javascript">    window.onload=function(){        var odiv=document.getElementById('div3');    odiv.onclick=function(ev){    var Event=ev||event;    Event.alert("要被阻止了");    Event.cancelBubble=true;    }    } </script></head><body><div style="background:#ccc;" onclick="alert('能冒泡到最顶层');"><div style="background:#808008;" onclick="alert('能冒泡到中间层div');"><div id="div3" style="background:red;"></div></div></div></body></html>

这样添加了cancelBubble之后，点击div3图层的冒泡事件就被阻止了

0 0