盒子模型：

  el.offsetWidth：本身宽度+边框线+左右内边距；
  el.offsetHeight：本身高度+边框线+上下内边距；

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 400px;
            height: 300px;
            background-color: #ccc;
            padding: 20px;
            border: 10px solid #f00;
            margin: 30px;
        }

        .box2 {
            width: 300px;
            height: 200px;
            border: 10px solid green;
            overflow: scroll;
        }
    </style>
    <div class="box1">box1</div>
    <div class="box2">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>段落9</p>
        <p>段落10</p>
        <p>段落11</p>
        <p>段落12</p>
        <p>段落13</p>
        <p>段落14</p>
        <p>段落15</p>
        <p>段落16</p>
        <p>段落17</p>
        <p>段落18</p>
        <p>段落19</p>
        <p>段落20</p>
        <p>段落21</p>
        <p>段落22</p>
        <p>段落23</p>
        <p>段落24</p>
        <p>段落25</p>
        <p>段落26</p>
        <p>段落27</p>
        <p>段落28</p>
        <p>段落29</p>
        <p>段落30</p>

    </div>
    <div class="box3">box3</div>
    <script>
        let box1 = document.querySelector('.box1');
        
       console.log(box1.offsetWidth);
       console.log(box1.offsetHeight);
       console.log(box1.clientWidth);
       console.log(box1.clientHeight);

       let box2 = document.querySelector('.box2');
       console.log(box2.scrollWidth);
       console.log(box2.scrollTop);
       box2.onscroll = function(){
            console.log(box2.scrollTop);
       }
    </script>

获取窗口宽高：

<script>
        console.log(window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight);
        console.log(window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth);
    </script>

获取窗口的滚动距离：

    <style>
        .content {
            height: 2000px;
            background-color: #ccc;
        }

        .box1 {
            width: 400px;
            height: 300px;
            background-color: #ccc;
            padding: 20px;
            border: 10px solid #f00;
            margin: 30px;
        }
    </style>
    <div class="content"></div>
    <div class="box1">box1</div>
    <script>
        // console.log(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
        window.onscroll = function(){
            console.log(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
        }
    </script>

标签的尺寸大小和偏移量：

 1.box1.getBoundingClientRect()获取到的偏移量相对于窗口来的，不会加上滚动距离offsetTop和offsetLeft获取到的偏移量是相对于页面内容来的

 2.如果对应标签的某个祖先有定位,那么offsetTop和offsetLeft获取到的偏移量是相对于有定位属性的祖先来的。

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            height: 800px;
            background-color: #ccc;
        }

        .box1 {
            width: 400px;
            height: 300px;
            background-color: #ccc;
            padding: 20px;
            border: 10px solid #f00;
            /* margin: 30px; */
        }

        .box2 {
            width: 300px;
            height: 200px;
            border: 10px solid green;
            overflow: scroll;
        }

        .box1-parent {
            padding: 100px;
            /* margin: 20px; */
            background-color: pink;
            position: relative;
        }

        .box1-grandparent {
            margin: 50px;
            position: relative;
            padding: 100px;
            background-color: green;
        }
    </style>
    <div class="content">content</div>
    <!-- <div class="box1">box1</div> -->

    <div class="box1-grandparent">
        <div class="box1-parent">
            <div class="box1">box1</div>
        </div>
    </div>
    <div class="box2">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>段落9</p>
        <p>段落10</p>
        <p>段落11</p>
        <p>段落12</p>
        <p>段落13</p>
        <p>段落14</p>
        <p>段落15</p>
        <p>段落16</p>
        <p>段落17</p>
        <p>段落18</p>
        <p>段落19</p>
        <p>段落20</p>
        <p>段落21</p>
        <p>段落22</p>
        <p>段落23</p>
        <p>段落24</p>
        <p>段落25</p>
        <p>段落26</p>
        <p>段落27</p>
        <p>段落28</p>
        <p>段落29</p>
        <p>段落30</p>

    </div>
    <div class="box3">box3</div>
    <div class="content">content</div>

    <script>
        let box1 = document.querySelector('.box1');
        console.log(box1.getBoundingClientRect());
        console.log(box1.getBoundingClientRect().x);
        console.log('getBoundingClientRect: ',box1.getBoundingClientRect().y);

        console.log('offsetTop:',box1.offsetTop);
        console.log(box1.offsetLeft);
      
        // 父亲和爷爷都有定位
        console.log(box1.offsetParent);//box1的父亲
        console.log(box1.offsetParent.offsetParent);//box1的爷爷
        console.log(box1.offsetParent.offsetParent.offsetParent);//body
        console.log(box1.offsetParent.offsetParent.offsetParent.offsetParent);//null
        // console.log(box1.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent);//null


    </script>

让页面滚动到指定位置：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            height: 1000px;
            background-color: #ccc;
        }

        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div class="content">content1</div>
    <div class="box">box</div>
    <div class="content">content2</div>
    <script>
        // window.scroll(x,y);
        // window.scroll(0,200);
        // window.scroll(0,400);
        // window.scrollTo(0,400);

        // window.scrollBy(0,400);

        let box = document.querySelector('.box');
        box.onclick = function(){
            // window.scroll(0,200);//相对整个页面内容来的
            window.scrollBy(0,200);//相对当前位置来的
        }
        // 默认值为true:box上边与窗口上边持平，false:box下边与窗口下边持平
        box.scrollIntoView(false);
    </script>

事件的绑定：

  语法：addEvent(el,eventName,eventFn)  给对应标签绑定事件

            el: 事件源（标签）

            eventName: 事件名称

            eventFn：事件处理函数

<script>
        function box2(){
            alert('点了box2一下')
        }
        var box3 = document.querySelector('.box3');
        /* box3.onclick = function(){
            console.log('点了box3一下');
        }
        //移除事件
        box3.onclick = null; */
        // box3.onclick = function(){
        //     console.log('点了box3一下1111111111');
        // }
        // box3.onclick = function(){
        //     console.log('点了box3一下2222222222');
        // }
        // box3.onclick();//手动触发点击事件
        // console.dir(box3);

        
        // box3.addEventListener(事件,事件处理函数);
        /* box3.addEventListener('click',function(){
            console.log('点了box3一下');
        })
        box3.removeEventListener('click',function(){
            console.log('点了box3一下');
        }); */
        // box3.addEventListener('click',fn)
        // box3.removeEventListener('click',fn);
        /* function fn(){
            console.log('点了box3一下');
        } */
        // fn();

        /* box3.addEventListener('click',function(){
            console.log('点了box3一下11111111111');
        })
        box3.addEventListener('click',function(){
            console.log('点了box3一下22222222222');
        }) */
        // box3.attachEvent(on事件,事件处理函数);
        /* box3.attachEvent('onclick',fn);
        box3.detachEvent('onclick',fn);
        function fn(){
            console.log('点了box3一下');
        } */
      
        function addEvent(el,eventName,eventFn){
            // el.oneventName = eventFn;
            // el['on'+eventName] = eventFn;
            if(el.addEventListener){
                el.addEventListener(eventName,eventFn);
            }else if(el.attachEvent){
                el.attachEvent("on"+eventName,eventFn);
            }else{
                el['on'+eventName] = eventFn;
            }
        }
        addEvent(box3,'click',function(){console.log('点了box3一下');});
        // 事件移除的封装
        function removeEvent(el,eventName,eventFn){
            if(el.removeEventListener){
                el.removeEventListener(eventName,eventFn);
            }else if(el.detachEvent){
                el.detachEvent("on"+eventName,eventFn);
            }else{
                el['on'+eventName] = null;
            }
        }

        // let obj1 = {};
        // let obj2 = {};
        // console.log(obj1==obj2);//false
    </script>

事件对象：

 pageX\pageY：获取到的是鼠标点击的位置(相对于整个页面内容来的)

            clientX、clientY：获取到的是鼠标点击的位置(相对于窗口来的)

            offsetX、offsetY：获取到的是鼠标点击的位置（相对于自身来的）

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: #f00;
        }
        .parent{
            width: 300px;
            height: 200px;
            background-color: green;
        }
        .grand-parent{
            width: 400px;
            height: 300px;
            background-color: blue;
        }
        .content{
            height: 1000px;
            background-color: #ccc;
        }
    </style>
    <div class="content">content</div>
    <div class="grand-parent">
        <div class="parent">
            <div class="son">son1</div>
            <div class="son">son2</div>
        </div>
    </div>
    <script>
       
        let parent = document.querySelector('.parent');
        parent.addEventListener("click",function(ev){
            console.log('ev:',ev);
            let e = ev||event;
            console.log(e);
            console.log("点了一下parent",event);
            /* console.log(event.pageX);
            console.log(event.pageY); */
            /* console.log(event.clientX);
            console.log(event.clientY); */
            console.log(event.offsetX);
            console.log(event.offsetY);
            console.log(event.target);
        });
    </script>

事件三阶段：

 事件三阶段：先捕获  后目标  再冒泡

 eventPhase  1(捕获)  2（目标）  3（冒泡）

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: #f00;
        }
        .parent{
            width: 300px;
            height: 200px;
            background-color: green;
        }
        .grand-parent{
            width: 400px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <div class="grand-parent">
        <div class="parent">
            <div class="son">son</div>
        </div>
    </div>
   
    <script>
        let son = document.querySelector('.son');
        let parent = document.querySelector('.parent');
        let grand_parent = document.querySelector('.grand-parent');
        son.addEventListener("click",function(){
            console.log('son',event.eventPhase);
        });
        parent.addEventListener("click",function(){
            console.log('parent',event.eventPhase);
        },true);
        grand_parent.addEventListener("click",function(){
            console.log('grand_parent',event.eventPhase);
        },true);
    </script>

事件委托：

 事件委托：事件代理

当多个标签需要绑定相同事件的时候，就可以把事件委托给某个共同的祖先

事件委托的原理就是利用了事件冒泡

    <script>
        /* let allLi = document.querySelectorAll('li');
        allLi.forEach(li=>{
            li.addEventListener('click',function(){
                console.log('点了一下li',this);
            })
        }) */
        let ul = document.querySelector('ul');
        ul.addEventListener("click",function(){
            console.log("点击了ul",event.target);
        });
    </script>

阻止浏览器默认事件：

<script>
        let a = document.querySelector('a');
        a.addEventListener('click',function(){
            // event.preventDefault();
            event.preventDefault?event.preventDefault():event.returnValue = false;
            console.log("点了一下a");
        })

        // 鼠标右键事件
        window.oncontextmenu = function(){
            event.preventDefault?event.preventDefault():event.returnValue = false;
            console.log("鼠标右键点了一下");
        }
    </script>

阻止事件冒泡：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: #f00;
        }
        .parent{
            width: 300px;
            height: 200px;
            background-color: green;
        }
        .grand-parent{
            width: 400px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <div class="grand-parent">
        <div class="parent">
            <div class="son">son</div>
        </div>
    </div>
   
    <script>
        let son = document.querySelector('.son');
        let parent = document.querySelector('.parent');
        let grand_parent = document.querySelector('.grand-parent');
        son.addEventListener("click",function(){
            console.log('son',event.eventPhase);
            // 阻止事件冒泡
            // event.stopPropagation();
            event.stopPropagation?event.stopPropagation():event.cancelable = true;
        });
        parent.addEventListener("click",function(){
            console.log('parent',event.eventPhase);
        });
        grand_parent.addEventListener("click",function(){
            console.log('grand_parent',event.eventPhase);
        });
    </script>

鼠标单击和双击事件：

 <div class="box1">box1</div>
    <script>
        let box1 = document.querySelector('.box1');
        let tid  = null;
        box1.addEventListener('click',function(){
            if(tid){//如果300ms内点击了两次，点击第二次的时候，tid就有值了，就清除定时器，不去执行单击事件的逻辑代码
                clearTimeout(tid);
                tid  = null;
                return ;
            }
            tid = setTimeout(() => {
                console.log("单击事件的逻辑代码");
                tid  = null;
            }, 300);
        });
        // 300ms以内点了两次
        box1.addEventListener('dblclick',function(){
            console.log("双击事件的逻辑代码");
        });
    </script>