YanTianFeng的知识库

Want Coding

Want Reading

文章 89

访问 18443

评论 2

头像

YanTianFeng

发私信

文章 89
访问 18443
评论 2
JAVASCRIPT
返回顶部

Knowledge  javascript事件 -- 事件模型&事件处理程序

标签   js   事件  

  ( 129 )       ( 0 )


前言

在浏览器中几乎所有的动作交互、数据更新都是由事件驱动的。

认识事件事件、事件处理程序

事件:是文档或者浏览器窗口中发生的,特定的交互瞬间,是用户或者浏览器自身执行的某种动作,如 click , load , mouseover 都是事件的名字。

事件处理程序:事件发生后,执行的代码就是事件处理程序。

图中给 document 添加 click 事件的代码是用原生 js 方式实现的,但是实际当中还可以用其他方式来添加事件,也就是说给 DOM 元素添加事件的方式不唯一,之所以会这样是因为存在多种事件模型( DOM 0 事件模型、 W3C 事件模型、 IE 事件模型)

事件模型

聊聊三种事件模型: DOM 0 事件模型、 W3C 事件模型、 IE 事件模型。

DOM 0 事件模型

添加事件处理程序


DOM 0 事件模型是目前为止使用最简单的最能满足跨浏览器兼容的事件模型;它受所有的主流 web 浏览器支持。那么,为什么不在任何地方都使用 DOM 0 事件模型呢?原因很简单:它无法处理同一元素上的多个事件处理程序,后面的会覆盖前面的

删除事件处理程序

myBtn.onclick=null;

W3C 事件模型

W3C 事件模型,也称“ DOM 2 事件模型”, DOM2 级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序: addEventListener() 和 removeEventListener() 。

添加事件处理程序


删除事件处理程序

通过 addEventListener 添加的事件处理程序必须通过 removeEventListener 删除,且参数一致。

通过 addEventListener 添加的匿名函数将无法删除。下面这段代码将不起作用!

myBtn.removeEventListener("click",function(){
        alert("world");
},false);

为了能删除事件处理程序,代码可以这样写:


IE 事件模型

IE8 及以下浏览器不支持 addEventListener ,但实现了与 DOM 中类似的两个方法: attachEvent() 和 detachEvent() 。

这两个方法都需要两个参数:事件名称和事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡,所以通过 attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。注意:事件名称,要加上 on ,是 onclick 而不是 click 。

添加事件处理程序


IE11 只支持 addEventListener !

IE9 , IE10 对 attachEvent 和 addEventListener 都支持!

TE8 及以下版本只支持 attachEvent !

删除事件处理程序


通过 attachEvent 添加的事件处理程序必须通过 detachEvent 方法删除,且参数一致。和 W3C 事件模型一样,添加的匿名函数将无法删除。

IE 事件处理程序中还有一个地方需要注意:作用域

使用 attachEvent() 方法,事件处理程序会在全局作用域中运行,因此事件处理程序中的 this 等于 window 。而 W3C 或 dom0 事件模型的的事件处理程序中, this 值为目标元素。

在编写跨浏览器的代码时,需牢记这点。

IE7 \ 8 检测

//判断IE7\8 兼容性检测
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
             
if(isIE8 || isIE7){
        li.attachEvent("onclick",function(){
                _marker.openInfoWindow(_iw);
        })    
 }else{
         li.addEventListener("click",function(){
               _marker.openInfoWindow(_iw);
         })
}