重绘与回流

  重绘

    当元素样式的改变不会影响布局时，浏览器将会使用重绘对元素进行更新，此时只需要UI层面的重新像素绘制，所以损耗较少
    常见的重绘操作：
    改变元素的颜色、改变元素的背景颜色等

  回流（重排）

    当元素的尺寸、结构发生改变或者出发某些属性时，浏览器会重新计算渲染页面内，发生回流
    比如让标签隐藏或者改变标签的宽高、还有就是通过js往页面中添加DOM元素以及通过js获取元素的尺寸大小或者偏移量

     重绘不一定会引起回流，但是回流一定会引起重绘

浏览器的渲染过程

  浏览器的渲染过程：
    1.解析html创建DOM树
    2.解析css创建CSSOM (css rule true css规则树)
     3.将DOM树和CSSOM结合，合并成一个Render Tree（渲染树）
     4.根据渲染树，去布局绘制并显示
  DOM    CSSOM    Render Tree

阻止事件冒泡和系统默认事件

  阻止浏览器默认事件
    在事件处理函数中写入

		event.preventDefault()
		IE浏览器兼容处理 ———— event.preventDefault ? event.preventDefault() : event.returnValue = false;

  阻止事件冒泡
    在事件处理函数中写入

        event.stopPropagation();      （阻止事件冒泡）
        IE浏览器兼容处理 ———— event.stopPropagation?event.stopPropagation():event.cancelBubble = true;
        
        event.stopImmediatePropagation();         （阻止事件冒泡，如果同一个标签对象绑定多个处理事件，则阻止后续绑定事件）

  ps：
    多次绑定事件如果以标签对象 . on事件 = 事件处理函数 方式，则只会显示最后一次 （相对于修改属性值）

        document.querySelector('.box').onclick = function(){
            console.log("第一次给box绑定click事件");
        }
        document.querySelector('.box').onclick = function(){
            console.log("第二次给box绑定click事件");
        }

鼠标常见事件

  鼠标单击事件click

        标签对象 . addEventListener('click',function(){
            console.log("鼠标单击事件");
        });

  鼠标双击事件dblclick

        标签对象 . addEventListener('dblclick',function(){
            console.log("鼠标双击事件");
        });

  鼠标右键事件contextmenu

        标签对象 . addEventListener('contextmenu',function(){
            console.log("鼠标右键事件");
        });

  鼠标按下事件mousedown

        标签对象 . addEventListener('mousedown',function(){
            console.log("鼠标按下事件");
        });

  鼠标松开事件mouseup

        标签对象 . addEventListener('mouseup',function(){
            console.log("鼠标松开事件");
        });

  鼠标移入事件mouseenter

        标签对象 . addEventListener('mouseenter',function(){
            console.log("鼠标移入事件mouseenter");
        });

  鼠标移出事件mouseleave

        标签对象 . addEventListener('mouseleave',function(){
            console.log("鼠标移出事件mouseleave");
        });

      mouseenter mouseleave不支持冒泡
      mouseover mouseout  支持冒泡

  鼠标移入事件mouseover

       标签对象 . addEventListener('mouseover',function(){
            console.log("鼠标移入事件mouseover");
        });

  鼠标移出事件mouseout

        标签对象 . addEventListener('mouseout',function(){
            console.log("鼠标移出事件mouseout");
        });

  鼠标移动事件mousemove

        标签对象 . addEventListener('mousemove',function(){
            console.log("鼠标移动事件");
        });

  鼠标滚轮事件mousewheel

        window.addEventListener('mousewheel',function(){
            console.log("鼠标滚轮事件");
        });

  拖动事件
    dragstart  开始拖动，该事件绑定在拖动的节点之上
    dragover  拖动到目标区域之上，该事件绑定在目标区域之上，事件需要清除浏览器默认事件，不然无法触发 drop 事件
    drop    拖动后松开，该事件绑定在目标区域之上

		let box = document.querySelectorAll('.box');
		let clickX,clickY;
        box.addEventListener('dragstart',function(){
            console.log(1);
            // 获取鼠标点击box的位置
            clickX = event.offsetX;		//鼠标点击的位置距离自身左边的距离
            clickY = event.offsetY;		//鼠标点击的位置距离自身上边的距离
        });
        window.addEventListener('dragover',function(){
            console.log(2);
            event.preventDefault();		//清除浏览器默认事件，以触发 drop 事件
        });
        window.addEventListener('drop',function(){
            console.log(3);
            // 鼠标松开后就要改变box5（拖动的目标）的位置
            box.style.left = `${event.pageX-clickX}px`;	//pageX鼠标点击的位置距离整个页面左边的距离
            box.style.top  = `${event.pageY-clickY}px`;	//pageY鼠标点击的位置距离整个页面上边的距离
        });

键盘事件

  键盘按下事件keydown

        window.onkeydown = function(){
            console.log("键盘按下事件");
        }

  键盘松开事件keyup

        window.onkeyup = function(){
            console.log("键盘松开事件");
        }

  Tips:
    event事件对象里有key属性，keyCode属性等，可判断是键盘的哪个键

其他事件

  load事件：页面所有资源加载完成后执行

        window.onload = function(){
            console.log("页面所有资源加载完成后执行 load 事件");
        }

  scroll事件：常用于绑定在window对象上, 滚动鼠标时触发

        window.onscroll = function () {
            console.log(document.body.scrollTop || document.documentElement.scrollTop);获取页面滚动距离兼容性处理
        }

  resize事件：监听窗口大小变化

        window.onresize = function () {
            console.log("监听窗口大小变化");
        }

表单事件

    <form>
        <input type="text">
        <br>
        <input type="password">
        <br>
        <input type="search">
        <br>
        <input type="submit">
        <button type="submit">提交</button>
        <input type="reset">
        
    </form>

  表单提交事件submit

		1. 监听表单提交事件，表单提交到服务器前，先执行该事件；
		2. 该事件只能由 input：submit/button：submit按钮触发
		3.如果事件处理程序返回false，则表单提交取消，数据不会提交到服务器处理；
	
	attention！   阻止表单提交	只能使用表单.onsubmit()方法触发表单提交事件返回false有用，表单.addEventListener()不可以；

		Form.onsubmit = function(){
            console.log("表单提交的时候触发");
            // 阻止表单提交
            return false;
        }

  表单重置事件reset

        Form.onreset = function(){
            console.log("表单重置的时候触发");
        }

  focus事件

		Input.onfocus = function(){
            console.log("输入框获取焦点时触发");
        }

  blur事件

        Input.onblur = function(){
            console.log("输入框失去焦点时触发");
        }

   input 事件

        Input.oninput = function(){
            console.log("输入框值一改变就触发");
        }

  change 事件

        Input.onchange = function(){
            console.log("输入框值在失去焦点的时候与聚焦的时候不一样就会触发 ");
        }

  select事件

        Input.onselect = function(){
            console.log("用户选取输入框内容的时候触发");
        }

  search事件

		Input.onsearch = function(){
            console.log("用户去搜索的时候触发");
        }

浏览器地址栏输入url地址到页面加载的流程

  客户端（浏览器）
     1.先进行域名解析
     2.进行http请求，三次握手四次挥手
     3.加载解析html：代码就是从上往下一行一行的执行，在执行的过程中，会解析html标签创建一个DOM树，
     解析css创建CSSOM，将DOM树和CSSOM结合，合并成一个Render Tree（渲染树），根据渲染树，去布局绘制并显示。

鼠标的点击和双击事件的区分

  Tips：鼠标双击在500ms内有效，鼠标双击就是两次单击

        let Box = document.querySelectorAll('.box');
        let tid = 0;
        Box.addEventListener('click',function(){
        //判断是否为双击事件
            if(tid){		// （tid为初始值时不执行）双击时tid是有值的
                clearTimeout(tid);
                tid = 0;	//修改tid值为0，不修改就一直是双击事件
                return ;	//跳出，不触发单击事件
            }
            tid = setTimeout(()=>{        //定时器setTimeout返回整型数值id,是setTimeout的唯一标识符
                console.log("鼠标单击事件");
                console.log("单击事件的逻辑代码");
                tid = 0;	//单击事件结束后修改tid为原始值，否则无法判断是否为双击事件
            },500);         //延迟500ms执行
        });

        Box.addEventListener('dblclick',function(){
            console.log("鼠标双击事件");
            console.log("双击事件的逻辑代码");
        });