CSS浮动之高度塌陷、JS事件冒泡和事件委托

最新推荐文章于 2023-03-11 21:20:35 发布

Dormiveglia-flx

最新推荐文章于 2023-03-11 21:20:35 发布

阅读量546

点赞数

分类专栏： HTML5+ES6-ES13+CSS3 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/sugerfle/article/details/128900306

版权

HTML5+ES6-ES13+CSS3 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

文章介绍了CSS中的浮动现象导致的高度塌陷问题，以及解决方案——伪元素清除浮动。同时，讨论了JavaScript中的事件冒泡概念，通过示例展示了事件冒泡的顺序。接着解释了事件委托的概念，它是如何利用事件冒泡来简化大量元素的事件处理并提高性能的。

摘要由CSDN通过智能技术生成

闲来无事，写写JS与CSS两个小面试题

- 一 CSS浮动之高度塌陷
- 二 JS事件冒泡和事件委托

一 CSS浮动之高度塌陷

背景

什么是浮动？让一个元素飘着、浮着，使之脱离文档流；它的作用就是让竖着排的元素横向排列

在这里插入图片描述
那什么是高度塌陷呢？

所谓浮动造成的高度塌陷，就是在父元素没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态（没有高度）；因为子元素浮动后是不占据父元素的位置空间的。

在这里插入图片描述

有很多种方法可以解决这个问题，常用方法是：伪元素清除浮动
在这里插入图片描述

二 JS事件冒泡和事件委托

事件冒泡

什么是事件冒泡：从触发事件的那个节点一直到document，是自下而上的去触发事件

在这里插入图片描述

<div id="father">
    <div id="son">事件测试</div>
</div>
<script src="jquery.min.js"></script>
<script>
    window.onload = function(){
        //addEventListener绑定事件的第三个参数默认为false
        document.getElementById("father").addEventener("click",funtion(){
            console.log("这是父div"+this.id)
        })
        document.getelementById("son").addEvenListener("click",function(){
            console.log("这是子div"+this.id)
        })
    }
</script>

点击father输出结果：这是父divfather

点击son输出结果这是子divson 这是父divfather (事件冒泡：先执行son，在执行father)

什么是事件委托：当页面中很多表格或列表需要添加事件时，如果逐个添加那就太麻烦了，但是使用事件委托就能极大的减轻我们的工作量，同时也能提高页面的性能。

事件委托

事件委托是利用事件的冒泡原理来实现的，大致可以分为三个步骤：

1.确定要添加事件元素的父级元素；
2.给父元素定义事件，监听子元素的冒泡事件；
3.使用 event.target 来定位触发事件冒泡的子元素。

没用事件委托的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload = function(){
            var the_ul = document.getElementById('list');
            var the_li = the_ul.getElementsByTagName('li');
            // 挨个添加点击事件
            for( var i=0; i < the_li.length; i++ ){
                the_li[i].onclick = function(){
                    console.log(this.innerHTML)
                }
            }
        }
    </script>
</body>
</html>

使用事件委托的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload = function(){
            // 1.确定要添加事件元素的父级元素；
            // 2.给父元素定义事件，监听子元素的冒泡事件；
            // 3.使用 event.target 来定位触发事件冒泡的子元素。
            var the_ul = document.getElementById('list');
            the_ul.onclick = function(e){
                console.log(e.target.innerHTML)
            }
        }
    </script>
</body>
</html>