js事件对象兼容处理及传播机制

事件分为两部分

 事件分为两部分:1.行为本身和事件绑定
 1.行为本身:浏览器天生就赋予其的行为(mouseover mouseenter mouseout mouseleave mousemove mousedown mousewheel mouseup scroll resize click load unload focus blur keydown keyup),即使没有给上述方法绑定事件,事件也是存在的,只是什么事都没做。
 2.事件绑定: 给元素的某一个行为绑定方法。
    绑定事件的方法: 
    a)DOM0级事件绑定
       DOM.onclick = function(){ click行为定义在当前元素的私有属性上}
       DOM0级事件绑定:同一个元素绑定同一个事件名以后定义的为准
    b)DOM2级事件绑定
       DOM.addEventListener('click',function(){ addEventListener属性定义在EventTarget这个类的原型上 })
       DOM2级事件绑定:同一个元素多次绑定同一个事件,不同的方法,都会执行,如果事件名相同,方法名也相同并且执行阶段也相同,那么只会执行一个。
       同时,DOM2还有除了DOM0中的行为外,还有一下行为类型:
      DOMContentLoaded:html结构(不含图片..)加载触发事件。

      在用DOM2级事件绑定的时候,里面的fn要使用实名函数,方便不用的时候解除。
      事件移除: removeEventListener(type,fnname,boolean)  要和绑定的时候保持一致;

       兼容性: IE6-8   绑定事件:attachEvent('onclick',fn)  只能在冒泡阶段发生
                     解除事件:detachEvent('onclick',fn)  只能在冒泡阶段发生

事件对象及兼容处理

在元素的事件方法执行的时候,浏览器默认的给执行的方法传递了一个参数:MouseEvent
MouseEvent:一个对象数据类型值,里面包含的属性名和属性值都是用来记录鼠标的相关信息的。
MouseEvent记录的是页面中唯一一个鼠标每一次触发的相关信息,和到底是在哪个元素上触发的没有关系。

兼容性:
MouseEvent:支持ie9+(标准浏览器);
window.event: 支持ie8及以下和标准浏览器(火狐除外)。
兼容写法: var e = e || window.event

e.type: 存储的是当前鼠标触发的行为类型;
e.clientX: 鼠标距离浏览器可视区域的X坐标;
e.keyCode : 键盘码  这时的 e 是 KeyboardEvent;
    
e.pageX:鼠标距离页面文档的X坐标(支持标准浏览器,IE6-8没有可通过clientY+滚动卷去的高度获取)。
e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft|| document.body.scrollLeft))

事件源(有兼容性):
e.target:当前鼠标触发的是那个元素,支持标准浏览器;
e.srcElement: IE6-8支持
兼容性: e.target = e.target || e.srcElement

阻止浏览器的默认行为:
e.preventDefault() 支持标准浏览器;
e.returnValue = false  支持IE6-8;
兼容写法:1.e.preventDefault?e.preventDefault():e.returnValue=false
          2.return false;

阻止事件冒泡:
e.stopPropagation()  支持标准浏览器
e.cancelBubble = false  支持IE6-8;
兼容写法:e.stopPropagation?e.stopPropagation():e.cancelBubble=true

事件的传播机制

事件的阶段:捕获阶段、目标阶段、冒泡阶段
捕获阶段:从外向内一次查找元素。
目标阶段:当前事件源本身的操作(方法执行)。
冒泡阶段:从内到外依次触发相关的行为(最常用的阶段)

使用DOM0级事件绑定给元素的某一个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的。
在IE中传播到html,在chrome下传播到document;

在捕获阶段完成方法执行时,需要使用DOM2级事件绑定,写法如下:
DOM.addEventListener('click',function(){},boolean)
boolean:true 在捕获阶段发生function  在捕获阶段发生的fn先执行;
      false  在冒泡阶段发生function

事件委托

利用事件的冒泡传播机制,如果一个容器中很多的元素都需要给点击事件绑定方法(之前是一个个的循环绑定的),我们现在不需要一个个的绑定,只需要给最外层的这个容器绑定一次即可,这样的话,不管点击里面的哪一个元素,最终都会传播到最外层的容器上,我们只需要获取到事件源(点击的那一个),根据不同的事件源做不同的处理即可。  优点:使用事件委托来处理,会比一个个的绑定的性能调高至少一倍

事件池

事件池用来存储当前元素行为绑定方法的(浏览器自带的机制)。
事件池的机制:
    1.只能给某个元素的同一个行为绑定多个不同的方法,如果方法相同了只能留一个;
    2.事件会按照绑定的顺序从上到下执行;
    3.执行的方法中的this是当前被绑定事件的元素本身。

IE678和标准浏览器的事件池机制对比:
1.顺序问题: 执行的时候顺序是混乱的,标准浏览器按照顺序依次执行
2.重复问题:IE678可以给同一个元素的同一个行为绑定多个相同的方法
3.this问题: IE678中当方法执行的时候,方法中的this不是当前被绑定事件的元素而是window
posted @ 2017-07-14 21:30  rainbow8590  阅读(277)  评论(0编辑  收藏  举报