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

client家族

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


<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>hahap>
    <p>hahap>
    <p>hahap>
    <p>hahap>
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.应用:背景颜色的改变


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onresizetitle>
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>

setTimeoutsetInterval的区别

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

js事件传递机制

1.冒泡机制
事件冒泡:就是从事件目标一层层(从里到外)传到最外边。
js学习笔记(三大家族—client家族、冒泡机制)_第1张图片
注意
(1)冒泡顺序:div -> body -> html -> document -> window
(2)不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load、unload


<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;
       }

<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>

你可能感兴趣的:(js学习笔记(三大家族—client家族、冒泡机制))