事件详解<一>

事件详解<一>

一 扭转对事件的认知

事件，是js和html交互的桥梁。当用户操作页面上的元素，比如点击，鼠标移入移出，然后做一些事情。你若触发，我便执行——事件发生，调用它的处理函数执行相应的javaScript代码给出响应。

在页面放一个元素：

<input type="button" id="btn" />

以onclick为例：

var oBtn = document.getElementById("btn"); //获得按钮的引用//用for in打印出对象上的属性名for(var i in oBtn){console.log(i);}

在控制台，可以看到，onclick作为元素对象的属性存在：

再打印出onclick得值：

console.log(oBtn["onclick"]); //null

当在页面中写一个元素的时候，这个元素本身就有事件存在，并不是给元素添加事件，而是添加事件处理函数。不给元素的事件指定相应的事件处理函数，作为对象的特殊属性，事件对应的值为null，则在页面中再怎么点也毫无反应。

当添加了事件处理函数：

oBtn.onclick = function(){alert("onclick");};

或：

function clicnFn(){alert("clicnFn1");}oBtn.onclick = clicnFn;

点击页面button会执行赋给点击事件的处理函数,弹出clicnFn1。

Note:不要认为是给元素添加了事件，只是给元素的事件添加了事件处理函数而已。

二 事件绑定

当在同一个元素同一事件添加不同的处理函数，如：

function clicnFn1(){alert("clicnFn1");}function clicnFn2(){alert("clicnFn2");}oBtn.onclick = clicnFn1;oBtn.onclick = clicnFn2;

点击按钮，只会弹出clicnFn2，因为下面的赋值会覆盖上面的赋值。

那怎么解决呢？答案是使用事件绑定。

在标准浏览器（FF，Chrome，ie9+），使用addEventListener，使用方法：

addEventListener(事件名，事件处理函数，布尔值);

第三个参数为布尔值，false是冒泡时触发，true为捕获时触发，通常设为false。除非想在到达事件目标之前，想做点事，那么设为true。（关于冒泡和捕获，会在事件流中详细讲解）

在ie低版本浏览器（ie6/7/8），使用attachEvent，使用方法：

atttachEvent(事件名，事件处理函数);

ie低版本浏览器不支持捕获，只支持冒泡。

封装兼容写法addEvent函数：

/* @fileOverview     对事件绑定的兼容封装@param {oBject}   元素对象@param {String}   事件名@param {Function} 事件处理函数*/function addEvent(obj,eventName,fn){if(obj.attachEvent){obj.attachEvent("on"+eventName,function(){//在ie低版本中，需要在事件名前加上on//在ie中事件绑定的处理函数this指向的window，需要用call将this指向obj,以便在事件处理函数中使用thisfn.call(obj);});}else{obj.addEventListener(eventName,fn,false);}}

使用封装函数：

addEvent(obj,"click",clicnFn1);addEvent(obj,"click",clicnFn1);

Note:在标准浏览器和ie低版本浏览器，绑定多个函数的执行顺序有所不同。

三 事件对象

事件对象是一座宝藏，里面藏着用来描述事件的信息。例如可以在事件对象中获得,事件类型，鼠标在页面的点击的位置，点击的目标。。。等等

在标准浏览器（FF，chrome，ie9+）获取事件对象

事件对象作为事件处理函数的第一个参数（包括chrome浏览器）

function clicnFn1(ev){alert(ev);}oBtn.onclick = clicnFn1;

Note: ev是定义的参数名，这个名字可以随便设置，比如为a,b,c..。都可以。

在ie低版本浏览器（ie6/7/8）获取事件对象（包括chrome浏览器）

事件对象会保存在全局对象window的一个属性中，属性名为event。

简单测试下：

<script>alert(event); </script>

在ie低版本浏览器弹出null，在chrome中弹出undefined，说明这个event已经定义只是在ie低版本浏览器中相当于这样定义：var event = null;在chrome中相当于这样定义:var event;

Note:要使用全局event事件对象，必须是在事件处理函数中才能获得。

例如：

function clicnFn1(){alert(event);}clicnFn1() 

直接调用,那么会弹出null或undefined。因为这是直接调用函数，而不是作为事件处理函数调用。

在例如：

function clicnFn1(){alert(event);}oBtn.onclick = clicnFn1;

作为事件处理函数调用，那么函数内用到event就是我们想要的事件对象了。

事件对象兼容性封装：

function clicnFn1(ev){var e = ev || event;};

事件暂时记录到这里，随后补充。。。