JavaScript事件流之事件冒泡，事件捕获

最新推荐文章于 2024-09-05 23:28:05 发布

leafqi

最新推荐文章于 2024-09-05 23:28:05 发布

阅读量632

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xi_2130/article/details/45644231

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

首先普及事件流知识，所谓事件流指的是页面接收事件的先后顺序。

先说说事件流为什么会分为事件冒泡和事件捕获吧。就是在第四代浏览器（IE4和Netscape4）在处理事件流时候提出了相反的概念，即现在的IE是事件冒泡，Netscape是事件捕获。是不是有点晕好吧，继续有例子。

概念：

事件冒泡：事件最开始由最具体的元素接收（文档层次中嵌套最深的那个节点），然后逐级向上传播最不具体的节点（document）。

事件捕获：事件由最不具体的元素接收，最后传播至最具体的元素。

事件冒泡代码实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div id="e">
        <input id="btn" type="button" value="按钮">
    </div>
    <script type="text/javascript">
        var e = document.getElementById('e');
        var btn = document.getElementById('btn');
        e.onclick = function (){
            alert("你点击了div");
        };
        btn.onclick = function(){
            alert("你点击了button");
        }
    </script>
</body>
</html>

当我点击了按钮时候，运行结果图：

①先出现

②再出现

是不是很诧异怎么会出现这种结果，没错，这就是因为事件冒泡的原因。

冒泡的顺序为：input->div->body->html->document,(仅是IE5.5及其以前)、IE9和safari,chrome,firefox,opera会冒泡到windows对象、

也就是说，在他的上层只要有事件就会被触发，所以，我们要防止事件冒泡，后面马上讲。

事件捕获是Nerscape唯一支持的事件模型，但是IE9和safari,chrome,firefox,opera也都支持事件捕获模型。由于老版本浏览器不支持事件捕获，所以很少有人用事件捕获，所以一般不考虑。

事件捕获代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div id="e">
        <input id="btn" type="button" value="按钮">
    </div>
    <script type="text/javascript">
        var e = document.getElementById('e');
        var btn = document.getElementById('btn');
        e.addEventListener('click',function(){
            alert('你点击了div');
        },true);
        btn.addEventListener('click',function(){
            alert('你点击了button');
        },true);
    </script>
</body>
</html>

运行结果图：

①先出现

②再出现

所以事件捕获只做了解就行了。

事件冒泡处理方案：

function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止
        }
    },

好了。