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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

闲来无事写写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>