js学习笔记（三大家族—client家族、冒泡机制）

最新推荐文章于 2022-03-17 21:26:37 发布

甜甜今天学了吗

最新推荐文章于 2022-03-17 21:26:37 发布

阅读量196

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105814938

版权

client家族

1.概念
clientWidth:网页可见区域的宽
clientHeight:网页可见区域的高
clientLeft、clientTop:元素边框的宽
2.offset、client、scroll的区别分析
（1）left和top
（2）width和height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 10px solid #000;
            margin: 20px;
        }
        p{
            line-height: 200px;
        }
    </style>
</head>
<body>
<div id="box">
    <p>haha</p>
    <p>haha</p>
    <p>haha</p>
    <p>haha</p>
</div>
<script>
    var box= document.getElementById('box');
    console.log(box.clientWidth, box.clientHeight); //240,240,内容+内边距
    console.log(box.offsetWidth, box.offsetHeight); //260,260,内容+内边距+边框
    console.log(box.scrollWidth,box.scrollHeight); //240,884,里面内容的宽度和高度
    //距离有定位的父盒子左边/上边的距离
    console.log(box.offsetLeft, box.offsetTop);//28,20
    //左/上边框的宽度
    console.log(box.clientLeft, box.clientTop);//10,10
    console.log(box.scrollLeft, box.scrollTop);//左/上滚动的长度
</script>
</body>
</html>

3.获取屏幕的可视区域
（1）ie9及其以上版本、最新浏览器
window.innerWidth, window.innerHeight
（2）标准模式
document.documentElement.clientWidth, document.documentElement.clientHeight
（3）怪异模式
document.body.clientWidth, document.body.clientHeight
（4）封装

client: function() {//页面可视区域
            if (window.innerWidth !== null) {
                return {
                    "width": window.innerWidth,
                    "height": window.innerHeight
                };
            } else if (document.compatMode === "CSS1Compat") {
                return {
                    "width": document.documentElement.clientWidth,
                    "height": document.documentElement.clientHeight
                };
            } else {
                return {
                    "width": document.body.clientWidth,
                    "height": document.body.clientHeight
                };
            }
        },

onresize

1.作用
用来监听页面大小是否发生改变。当窗口或框架的大小发生改变的时候就会调用。

<script>
    window.onresize = function (ev) {
        console.log('尺寸发生改变');//改变就会有
    }
</script>

2.应用：背景颜色的改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onresize</title>
</head>
<body>
</body>
<script src="工具/Tool.js"></script>
<script>
    /*
    当屏幕宽度>=960时，页面的背景颜色变为红色；
    当屏幕宽度>=640时，页面的背景颜色变为蓝色；
    当屏幕宽度<640时，页面的背景颜色变为绿色。
     */
    window.addEventListener('load',function (ev) {
        changecolor();//一开始就要调用，要不然打开时没有背景颜色
        window.addEventListener('resize',changecolor);
        function changecolor(ev1) {
            //获取可视区域的宽度
            if (Tool.client().width >= 960){
                document.body.style.backgroundColor = 'red';
            }
            else if (Tool.client().width < 640){
                document.body.style.backgroundColor = 'green';
            }
            else{
                document.body.style.backgroundColor = 'blue';
            }
        }
    })
</script>
</html>

`setTimeout`和`setInterval`的区别

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次。
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式，是重复执行。

js事件传递机制

1.冒泡机制
事件冒泡：就是从事件目标一层层（从里到外）传到最外边。
在这里插入图片描述
注意
（1）冒泡顺序：div -> body -> html -> document -> window
（2）不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        #father{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="father">
    <button id="btn">点我</button>
</div>
<script>
   var btn = document.getElementById('btn');
   var father = document.getElementById('father');
   btn.addEventListener('click',function (ev) {
       alert('点击了按钮');
       //因为有冒泡机制，所以在点击了按钮后会将点击事件自动添加到father
   });
   father.addEventListener('click',function (ev1) {
       alert('点击了father');
   })
</script>
</body>
</html>

2.阻止冒泡的方法
（1）标准浏览器和ie浏览器
w3c：ev.stopPropagation();
ie：ev.cancelBubble = true;
（2）兼容的写法

if (ev && ev.stopPropagation){ //w3c标准
           ev.stopPropagation();
       }else{ //ie系列
           ev.cancelBubble = true;
       }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        #father{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="father">
    <button id="btn">点我</button>
</div>
<script>
   var btn = document.getElementById('btn');
   var father = document.getElementById('father');
   btn.addEventListener('click',function (ev) {
       //阻止冒泡
       if (ev && ev.stopPropagation){ //w3c标准
           ev.stopPropagation();
       }else{ //ie系列
           ev.cancelBubble = true;
       }
       alert('点击了按钮');
       //点了按钮之后不会将点击事件传给father
   });
   father.addEventListener('click',function (ev1) {
       alert('点击了father');
   })
</script>
</body>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js学习笔记（三大家族—client家族、冒泡机制）

client家族1.概念clientWidth:网页可见区域的宽clientHeight:网页可见区域的高clientLeft、clientTop:元素边框的宽2.offset、client、scroll的区别分析（1）left和top（2）width和height<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫