dom事件

 用户的操作和应用程序之间的交互，事件

        常见的用户操作

        点击    click

        滑过    mouseover  mouseenter进入

        滑出    mouseout   mouseleave离开

        按住鼠标 mousedown

        释放鼠标 mouseup

        移动鼠标 mousemove

        按下按键 keydown

        释放按键 keyup

        双击鼠标 dblclick

        滚轮 mousewheel

        右键 click

        应用程序内部操作

        获取焦点

        失去焦点

        值改变

        加载完成

        卸载

        取消事件绑定dom.

        事件冒泡：触发事件时，事件从内向外传播，外层元素相同的事件被自动触发

        event:事件对象，作为事件函数的参数

        e.stopPropagation()组织事件冒泡

        e.cancelBubble=true;支持IE7 8和标准浏览器

        e.srcElement，触发事件的元素

        src=source来源

    默认行为：不需要js，自身执行的操作

        a的href submit， reset file

        e.preventDefault(),阻止默认行为

        e.returnValue=false;IE7 8

        return false;

        设置html内容，导致内部元素绑定的事件都是涉及的操作

        innerHTML,jq:html(),vue v-html

        事件委托：

            将原来绑定在元素上的事件，绑定在外层已经存在的元素上，事件触发时，判断事件源，来执行对应的操作

            优点：1、避免大量绑定事件，节省资源

            2、动态添加的元素具有事件

            3、设置过html内容之后狗，内部元素事件不丢失

            缺点：大量事件委托给同一个元素时，可能会导致事件源误判

    事件捕获：触发事件时，事件从外向内执行相同的事件，通过外层addEventListener的第三个参数true实现

    addEventListener第三参数默认是false，代表事件冒泡

    onclick不存在事件捕获，只有事件冒泡

     

    e:event,事件对象

    e.srcElement:事件源，触发事件的dom元素

    e.pageX,e.pageY:鼠标当前的水平和垂直位置，鼠标的(0,0)位置式文档左上角

    e.clientX,e.clientY：鼠标的(0,0)位置式窗口左上角

    document.documentElement.onmousemove=function(e){

        console.log("page:"+e.pageX,e.pageY);

        console.log("client:"+e.clientX,e.clientY)

    }

将事件作为标签属性：

            为实现结构与行为分离

            只能绑定一次

        在js中绑定事件

            只能绑定一次事件

        addEventListener

            多次绑定相同事件

        setTimeout(function(){},ms)

        clearTimeout(计时器编号t)

        setInterval

        clearInter