javascript的事件

1、事件对象——Event

　　1.1 什么事event：用来获取事件的详细信息，比如键盘事件，鼠标事件等等。

　　1.2 事件的兼容写法：IE，直接用event，firefox需要系统传入事件对象

document.onclick=function (ev){
	var oEvent=ev||event;
}

 2、事件发生的三个阶段

　　先看下面的栗子

　　当点击绿色的div时，事件会经历三个阶段：事件捕获阶段，目标阶段和事件冒泡阶段。

　　其中，Internet Explorer 8只支持事件冒泡，不支持事件捕获

　　其他主流浏览器比如chrome和firefox可以通过函数指定事件是否在捕获或冒泡阶段执行

　　　　绑定事件函数：element.addEventListener(event, function, useCapture)；

　　　　Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，可以使用 attachEvent() 方法来添加事件句柄

　　　　其中：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

• true - 事件句柄在捕获阶段执行
• false- false- 默认。事件句柄在冒泡阶段执行

　　所以在IE或者火狐或者谷歌浏览器上，上面的例子点击绿色的div，会依次弹出div2->div1->body->html

　　事件冒泡作用（本例子来自 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html）

<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，
//难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
function eventHandle(e)
{
    var e=e||window.event;
    var obj=e.target||e.srcElement;
    alert(obj.id+' was click')
}
</script>

　　利用事件冒泡的原理，我们会经常遇到一个名词，叫做事件委托（事件代理），也就是说，我们可以将在子元素的事件绑定放到父元素中统一处理，从而节省储存事件等空间并能大大的提高事件处理的效率，一个简单的事件委托的栗子如下：

//将事件绑定在父级元素document上面
document.onclick = function(event){
    event = event || window.event;

    //IE使用srcElement
    var target = event.target || event.srcElement;
    
    switch(target.id){
        case "btn1":
                //处理1
                break;
        case "btn2":
                //处理2
                break;
    }
};

　　事件冒泡带来的麻烦（本例子来自 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html）

<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>

<script type="text/javascript">
//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页
function openWin(url)
{
    window.open(url);
}
</script>

　　阻止事件冒泡

function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()　　　
    else
        window.event.cancelBubble=true　　//IE浏览器
}

 3、事件的绑定及注意点

　　通用的绑定方式：

//绑定多个事件时，后面的事件覆盖前面的
btn.onclick = fun1;
btn.onclick = fun2;

 　　IE8及更早IE浏览器事件的绑定方式：

//element.attachEvent(event, function);
//采用这种绑定方式，事件会叠加，先执行fun2,再执行fun1
btn.attachEvent("onclick", fun1);
btn.attachEvent("onclick", fun2);

 　　W3C标准的事件绑定方式：

//element.addEventListener(event, function, useCapture) 
//useCapture，上文中有提及，为指定事件是否在捕获或冒泡阶段执行参数
//执行顺序：fun1再fun2
btn.addEventListener("onclick", fun1, false);
btn.addEventListener("onclick", fun2, false);

 　　兼容性写法：

/***
 * 事件绑定兼容
 * @param element 需要绑定事件的元素
 * @param type 动作，如click
 * @param handler 事件
 * @param useCapture 指定事件是否在捕获或冒泡阶段执行参数，false为冒泡阶段，默认值
 * 
 * 存在问题：绑定多个事件时，事件发生顺序可能不同
 * 对于IE8以下，useCapture无用，不能实现捕获
 * this的指向
 */
function addEvent(element, type, handler, useCapture){
	if(element.addEventListener){  //w3c
		element.addEventListener(type, handler, useCapture);
	}else if(element.attachEvent){  //ie8-
		element.attachEvent("on" + type, handler);
	}else{  
		element["on" + type] = handler;
	}
}

 4、阻止浏览器默认行为

function preventDefault(event){
    if(e && e.preventDefault){
        event.preventDefault();
    }else{ 
        window.event.returnValue = false; 
    } 
}