DOM事件系列[5]

發表於   |   分類於

[5]跨浏览器中事件

  1. 做前端兼容性是个躲不开的话题，当你写出来的代码兼容性越强说明你的功底越深。所以在这里探讨下事件event的兼容性问题。event兼容性问题主要是IE浏览器与其他浏览器事件处理的区别，有如下几个方面需要了解：
  1. IE事件模型
  2. 事件的兼容性写法

IE事件模型

  1. IE支持的事件是中间模型，这个模型有区别与DOM Level 0 Events和DOM Level 2 Events。IE事件模型包括Event对象，但event并不会传递给事件句柄函数，而是作为Window对象的属性。另外IE事件模型不支持捕获形式Capturing的事件传播形式，只支持冒泡Bubbling事件传播。
  • IE Event对象

属性如下：

  1. type(String)，声明事件的类型。该属性的值是删除前缀on的事件名称，如click、mouseover；与DOM Event对象的type属性兼容。
  2. srcElement(node), 发生事件的文档元素。与DOM Event对象的target属性兼容。
  3. cancelBubble(boolean), IE Event对象没有stopPropagation()函数，所以如果需要阻止事件冒泡则需要通过设置cancelBubble的值，为true的时候表示阻止当前事件冒泡。
  4. returnValue(boolean), IE Event对象没有preventDefault()函数，所以如果需要阻止浏览器的默认行为则需要通过设置returnValue的值，为false的时候表示阻止当前标签的浏览器默认行为。
  • IE事件句柄的注册
  1. IE事件的注册是通过使用attachEvent()方法和detachEvent()方法，与DOM Event中的addEventListener()和removeEventListener()类似，但是以下几点不同：
  1. 由于IE事件模型只支持事件的冒泡传播方式，因此attachEvent()方法和detachEvent()方法都只有两个参数，分别是事件类型和句柄函数。
  2. 传递给IE方法的事件类型与DOM Event中有所区别，DOM Event使用的时候不需要带前缀on，而IE Event则需要。比如说对于点击事件，在DOM Event事件中则是用click进行绑定，而在IE Event则需要使用onclick绑定。
  3. 用attachEvent()注册的函数将被作为全局函数调用，而不是作为发生事件的文档元素的方法。也就是说，在attachEvent()注册的时间句柄执行时，关键字this引用的是window对象，而不是事件的目标元素。
    4.attachEvent()允许同一事件句柄函数注册多次。当指定类型的一个事件发生的时候，注册函数被调用的次数和它被注册的次数一样多。

事件的兼容性写法

  • 获取event对象

    1
    var event = event || window.event;

    或者写成:

    1
    2
    3
    4
    var event;
    if(event){
    	event = window.event;
    }

  • 获取事件发生的文档元素

    1
    var _srcElemtn = event.target || event.srcElement

  • 阻止当前事件冒泡

    1
    2
    3
    4
    5
    if(event.stopPropagation){
    	event.stopPropagation();
    } else {
    	event.cancelBubble = true;
    }

  • 阻止浏览器的默认行为

    1
    2
    3
    4
    5
    if(event.preventDefault){
    	event.preventDefault();
    } else {
    	event.returnValue = false;
    }