看完就能学会DOM（三）

重绘与回流

  重绘

    当元素样式的改变不会影响布局时，浏览器将会使用重绘对元素进行更新，此时只需要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("鼠标松开事件"