事件的冒泡与冒泡的取消方法

最新推荐文章于 2021-08-12 19:59:35 发布

原创

最新推荐文章于 2021-08-12 19:59:35 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了事件冒泡的概念，当一个元素触发事件时，该事件会逐级向上层元素传递，直到根节点。同时提到了事件捕获机制，与冒泡相反，事件从根节点向下层元素传播。了解这两种机制对于掌握DOM事件处理至关重要。

1事件冒泡

如果一个元素触发事情，那么其所有祖先元素都会依次执行触发该事件，这种机制称为冒泡
（好比气泡从水底下一直向上冒泡，像dom树一样，一直到根元素。）

2事件捕获

捕获与事件冒泡刚好相反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡与捕获</title>
    <style type="text/css">
        div.clsg{
   
   
            width: 500px;
            height: 500px;
            background-color: #f00;
        }

        div.clsf{
   
   
            position: relative;
            width: 300px;</