事件对象 event(e)

• 当DOM操作触发某个事件时，会产生事件对象event
  当事件被触发时产生，事件执行完毕时销毁
• 事件对象 event 首先它是一个对象
  包含着跟事件有关的所有信息
  包括触发事件的DOM以及每种事件的一些特征
• 例如：鼠标事件 event 包含鼠标的坐标等
  键盘事件 event 包含按下的键的信息
• 所有的事件 都必须被某个dom对象(dom元素)触发
• ele.onclick
  当被点击标签的时候触发onclick事件
• window.onscroll
  窗口事件当窗口的滚动条发生偏移是触发 onscroll事件
  事件对象是 event
  执行对象是 window
• 所有的事件不管是鼠标 键盘 窗口等，他们的事件对象都是event

 //事件类型
    //通过e.type获取被触发的事件类型
    //点击事件
    window.onclick = function(event){
        //事件对象的兼容性写法
        var e = event || window.event;
        console.log(e.type);  //PointerEvent
    }
    //鼠标移动事件
    window.onmousemove = function(event){
        //事件对象的兼容性写法
        var e = event || window.event;
        console.log(e.type); //MouseEvent
    }
    //滚动条事件
    window.onscroll = function(event){
        //事件对象的兼容性写法
        var e = event || window.event;
        console.log(e.type);  //Event
    }

    //不同的事件其事件对象有不同的数据
    //但是所有的事件对象都叫event

鼠标点击事件

• onclick 单击事件
• ondblclick 双击事件
  当给同一个盒子，同时绑定单击和双击事件时，触发双击事件必定会触发两次单击事件
• oncontextmenu 右键事件
  鼠标右键事件是有个默认功能的事件，它可以打开右键菜单
• onmousedown 鼠标按下事件
  鼠标一旦按下就会触发，而onclick是鼠标按下再松开的时候才触发
• onmouseup 鼠标松开事件
  当鼠标按下的时候不会触发，松开的时候才会触发

鼠标移动事件

• onmouseover 鼠标移入
• onmouseout 鼠标移出
• onmouseenter 鼠标移入
• onmouseleave 鼠标移出

两者不同点：

• 第一种（onmouseover、onmuseout）会触发事件冒泡
• 第二种（onmouseenter、onmouseleave）不会触发事件冒泡

• 给父级绑定了事件，子级没有绑定事件，但是当鼠标移入子级时，会触发父级的事件 ，这种情况叫做事件冒泡

鼠标坐标

• 鼠标的坐标在鼠标事件的事件对象中保存
• 所以要获取鼠标坐标，一般都是通过事件对象 event获取
• 所有的鼠标事件都可以通过事件对象来获取鼠标的坐标
• 但是通常我们在鼠标移动事件获取和使用鼠标坐标

获取鼠标坐标的几种方式

• 1、获取鼠标在窗口可视区中的坐标
  e.clientX / e,clientY
• 2、获取鼠标在目标元素中的坐标
  e.offsetX / e.offsetY
• 3、获取鼠标在文档中的坐标
  e.pageX / e.pageY
• 4、获取鼠标在屏幕上的坐标
  e.screenX / e.screenY

键盘事件

键盘事件类型

• 键盘按下 ： onkeydown
• 键盘抬起 ： onkeyup

document.onkeydown = function(event){
        var e = event || window.event;
        console.log("键盘按下");
        //获取按下键的键码
        var code = e.keyCode;
        console.log(code);
        /*
            字母上面的数字 ： 48 ~ 57
            字母 a ~ z ：  65 ~ 90
            删除键 ： 8
            回车键 ： 13
            shift键 ： 16
            左上右下 ： 37 ~ 40
            w a s d {
                w : 87
                a : 65
                s : 83
                d : 68
            }
            空格键 ： 32
            ctrl  ： 17
            alt ： 18
            Esc ： 27
        */
    }

表单事件

• onfocus 表单元素获取焦点时触发
• onblur 表单元素失去焦点时触发
• oninput 表单元素输入时触发
• onchange 表单元素里面的值发生改变且在失去焦点时触发

image对象

• 1、在html中创建img标签，用js获取
• 2、直接使用js创建img
• 3、使用Image构造函数来创建img

var img1 = document.createElement('img');

var img2 = new Image();
//设置宽高(不加单位)
img2.width = '400';
img2.height = '700';
img2.src = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Zxtf2X2EddV-g7hKyBhilAHaQB?pid=ImgDet&rs=1';

//将img添加到fbox中

fbox.appendChild(img2);

图片预加载

页面中的缓存机制

• 当图片第一次打开的时候浏览器会将图片保存在本地中，则就将缓存
• 第二次打开的时候浏览器会将图片的src在缓存的图片中去找
• 如果找到就从本地打开，不会再发网络请求
• 如果找不到就发网络请求 缓存图片

图片加载原理

• 图片在将src写好之后开始加载，而不是渲染时才开始加载

图片预加载原理

• 根据缓存和图片加载的原理。因为图片在设置src的时候就可以进行请求
• 并将保存好的图片保存到本地中（缓存）
  这个时候没有将图片渲染到页面中
  图片就不会出现，但是可以正常缓存
• 等需要将图片渲染到页面上时，图片早就已经缓存好
  加载就不会卡顿

图片的懒加载

//懒加载的封装

  //封装懒加载
    function lazyLoad(options){
        //先生成一个在页面展示的img
        var img1 = new Image();
        //设置占位src
        img1.src = options.jSrc;
        img1.width = options.w;
        img1.height = options.h;
        //将img1渲染到页面中
        options.fDiv.appendChild(img1);

        //在生成一个img，用来加载真实的图片
        var img2 = new Image();
        img2.src = options.zSrc;
        img2.onload = function(){
            img1.src = this.src;
        }
    }


 <div id="fbox"></div>
 //调用懒加载方法
    lazyLoad({
        jSrc : "./img/loding.gif",//占位图片
        //真实图片
        zSrc : "https://tse4-mm.cn.bing.net/th/id/OIP-C.TyOpfduNwosmeMHNb4ZQ8QHaEo?pid=ImgDet&rs=1",
        fDiv : fbox,
        w : 800,
        h : 600
    });