Javascript之事件

一、什么事事件？

    事件分为两部分：1->行为自己：浏览器天生就赋予其的行为 onclick、onmouseover、onmouseenter、onmouseout、onmouseleave、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚动事件)、onscroll(滚动条滚动行为)、onesize(window.onresize；浏览器窗口的大小改变事件)、onload、onunload（浏览器关闭事件）、onfocus(文本框获取焦点事件)、onblur(文本框失去焦点事件)、onkeydown、onkeyup(浏览器按下和抬起行为)......

    哪怕没有给上述的行为绑定方式，事件也是存在的，当咱们点击的时候，一样会触发它的onclick行为，只是什么都没有作而已，可是这个事件是存在的

    2->事件绑定：给元素的某一个行为绑定方法：

    //DOM0级事件绑定

    Ele.onclick = function(){}  //  onclick这个行为定义在当前元素的私有属性上

    //DOM2级 事件绑定

    Ele.addEventListener = function(){}  //addEventListener这个属性是定义在当前元素EventTarget这个类得原型上

    重要：不单单把绑定的方法执行，并且浏览器还默默地给这个方法传递了一个参数值->mouseEvent(鼠标事件对象)，1：它是一个对象数据类型的值，里面包含了不少的属性名和属性值，这些都是用来记录当前鼠标的相关信息的，2：mouseEvent->UIEvent->Event->Object   原型，3：MouseEvent记录的是页面中惟一一个鼠标每次触发时候的相关信息，和到底在那个元素上出发的没有关系

二、关于事件对象MouseEvent的兼容问题

    1：事件对象自己的获取存在兼容问题：标准浏览器是浏览器给方法传递的参数，咱们只须要定义形参e就能够获取到；可是在IE6~8中，浏览器不会传递参数，若是须要的话，须要到window.event中查找

    e = e || window.event  //兼容的写法  e.c;ientX/e.clientY 当前鼠标触发点距离左上角的坐标值

    e.pageX/e.pageY：当前鼠标触发点距离body左上角(页面第一屏的最左上角)的x/y轴的坐标，可是此属性在IE6~8是没有这个属性，咱们经过使用clientY+滚动条卷去的高度也能够 e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))  e.pageY = e.pageY || (clientY + (document.documentElement.scrollTop || document.body.scrollTop))

     e.type：存储的当前鼠标触发的行为类型"click"

    e.target  事件源，当前鼠标触发的是哪一个元素，那么它存储的就是哪一个元素，可是在IE6~8不存在这个属性(undefined)，用e.srcElement来获取事件源

    e.target = e.target || e.srcElement  //兼容性处理

    e.preventDefault：阻止浏览器的默认行为，在IE6~8中没有这个方法，咱们须要使用e.returnValue=false 来代替

        e.preventDafault ? e.preventDefault() : e.returnValue=false      这样写和return false的效果是同样的，都是阻止默认行为

    e.stopPropagation：阻止事件的冒泡传播，在IE6~8中不兼容，使用e.cancelBubble=true来代替

 

事件的传播机制：

    事件的默认传播机制

        捕获事件：从外到内依次查找元素

        目标阶段：当前事件源自己的操做

        冒泡阶段：从内到外依次触发相关的行为(咱们最经常使用的就是冒泡阶段)

    使用DOM0级事件绑定给元素的某一个行为绑定的方法，都是在行为出发后的冒泡阶段把方法执行

    不一样浏览器传播的最顶层的位置是不同的，在谷歌浏览器中是能够传播到document的，在IE中只能传播到HTML

addEventListener：第一个参数是行为类型，第二个参数是给当前的行为绑定方法，第三个参数是控制在哪一个阶段发生：true 在捕获阶段发生，false 在冒泡阶段发生

 

onmouseover和onmouseenter 都是鼠标进入的事件，可是onmouseenter不会发生事件的传播，自动的阻止了事件的传播，而onmouseover没有这个功能，须要手动阻止事件的传播