冒泡型事件

最新推荐文章于 2023-01-05 11:20:21 发布

Markfight!

最新推荐文章于 2023-01-05 11:20:21 发布

阅读量280

点赞数

文章标签：冒泡型事件

本文链接：https://blog.csdn.net/wzh66888/article/details/86550700

版权

在牛腩新闻发布系统中，牛腩老师使用到了冒泡型事件，当时是第一次见这个名词，今天来学习一下什么是冒泡型事件。

冒泡机制

气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制

原型图

在这里插入图片描述
在不同浏览器中，冒泡的程度不同：
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window

注意：

并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。

冒泡事件，如下代码：

HTML

<body>
    <div id="father">
        <button id="btn">点击</button>
    </div>
</body>

CSS

father {
    width:300px;
    height:300px;
    background-color:red;
    margin:auto;
}

JS

window.onload = function () {
    var father = document.getElementById("father");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("点击了按钮");
    };
    father.onclick = function () {
        alert("点击了父标签");
    };
    document.onclick = function () {
        alert("点击了文档");
    };
}