dom事件机制

http和https的区别

   1.http:客户端和服务器通信遵循的超文本传输协议(请求和应答的标准) 明文传输数据
    容易被黑客拦截( wifi、运营商网络、代理服务器)
    2.https是具有安全性得ssl加密的传输协议 会对传输的数据进行加密 会对响应的数据解密
    3.http默认端口是80,https默认端口是443
    4.页面加载时间不同 http连接简单无状态 https握手时间长 会使得页面加载时间延长50% 增加10%-20%得耗电
    5.https需要ca(给数据绑定加密方式)证书，费用较高

重排和重绘

重排:当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性，将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素。

重绘:当一个元素(颜色 字体颜色)的外观被改变,但是没有改变布局，重新把元素外观绘制出来的过程，叫做重绘,表现为某些元素的外观被改变；

重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间 占据cpu)会造成页面卡顿,ui展示迟缓。相比之下,重排性能影响更大,两者无法避免选择重绘。重绘不一定出现重排，但是重排一定出现重绘。

触发重排和重绘：

    1.添加、删除（重排）、更新节点（重绘）
    2.通过display:none（重排）
    3.通过visiblity:hidden（重绘）
    4.添加动画（重排）
    5.添加一个样式表（重排）
    6.用户行为（重排或者重绘）

事件委托

        事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

        将本应该绑定给子元素的事件代理给父元素

        目的:减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的

事件流

        分为事件冒泡和事件捕获

        事件捕获->事件处理->事件冒泡

        事件捕获:事件从外向内触发

        事件冒泡:事件从内向外触发

阻止事件冒泡和事件默认行为

event.stopPropagation()

event.preventDefault()

DOM 0级事件绑定 事件不可追加

    btn.οnclick=function(){}
    解绑:btn.οnclick=null
    DOM 2级事件绑定  事件可以追加 true
    代表事件在捕获阶段执行 false代表在冒泡阶段执行
    addEventListener(事件类型,事件处理程序(具名),布尔值)
    解绑
    removeEventListener(事件类型,事件处理程序)

event.target和event.currentTarget区别?

target是触发事件的源头 currentTarget是正在执行的事件

前者是事件触发源元素 目标事件

后者是当前正在执行事件的元素 当前目标事件

事件类型

    失焦 onblur
    聚焦 onfocus
    滚动 onscroll
    鼠标双击 ondblclick
    鼠标移入 onmouseenter
    鼠标移出 onmouseleave
    鼠标移动 onmousemove
    双击     ondblclick
    键盘按下 onkeydown
    持续按下键盘 onkeypress
    放下键盘 onkeyup