【原】JS事件机制和跨浏览器知识小结

最近项目中有个大问题，就是前台的处理很大程度上用到了JS 来动态的更新页面，还融合了ajax技术。项目的内容其实并不多，但是有一个问题很纠结，就是一个搜索效果的浮动div问题。大概的效果就是点击查询事件，弹出一个搜索框，能够接受鼠标 键盘上下键的查询和确认添加到候选列表的处理。本来逻辑并不复杂，调用ajax从后台得到数据，在前台处理结果显示，选中隐藏就完全可以了。但是就是因为要处理的事件很多，导致了效果不佳，跟老大不断调试，以实用主义为主要，终于将效果调制想要的程度。今天看到一篇js事件机制的文章，把我的困惑全部一扫而空，我唯一的念想就是：记录记录！一定要记录下来！！！！  


       Javascript也是一门事件驱动的脚本语言，和其他桌面软件一样，WEB应用程序也有自己的事件驱动机制。比如：单击(onclick)、鼠标经过(onmouseover)、鼠标按下(onmousedown)等等。

     

        在继续之前，我先详细讲讲Javascript的事件机制。 很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制，事件产生的顺序如下所示： 

引用

document  ------捕获-----> body ------捕获-----> div  ------捕获-----> span  （捕获机制）

  事件流如箭头所指顺序开始由根节点往各节点派送，如果该节点上绑定有事件动作，则执行该动作，完毕后继续往下一节点走。

        后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则：

  

document  <-----外抛----- body <------外抛----- div  <------外抛----- span  （冒泡机制）

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成了这样：

引用

                         ------捕获----->             ------捕获----->        ------捕获----->  （捕获阶段）

        document                            body                         div                           span                        

                         <-----外抛-----               <-----外抛-----         <-----外抛-----    (冒泡阶段)

 

善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。

 

    由于这两派浏览器的差异，其绑定的方法也不一样，其中，遵循标准的浏览器使用W3C定义的addEventListener函数绑定，函数定义如下：
     function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
     eventFlag : 事件名称，如click、mouseover…
     eventFunc: 绑定到事件中执行的动作
     useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

 

IE中使用自有的attachEvent函数绑定事件，函数定义如下：
    function attachEvent(string eventFlag, function eventFunc)
    eventFlag: 事件名称，但要加上on，如onclick、onmouseover…
    eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cancelBubble=false来阻止事件继续往下流

 

<script language="javascript">
//Javascript 事件演示
window.onload = function(){
var hideBox = function(event){
document.getElementById('status_show').style.display = 'none';
document.getElementById('status_hide').style.display = 'block';
};
var showBox = function(event){
document.getElementById('status_show').style.display = 'block';
document.getElementById('status_hide').style.display = 'none';
stopEvent(event);
};
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
};
if(document.addEventListener){
document.addEventListener('click', hideBox, false);
document.getElementById('status_hide').addEventListener('click', showBox, false);
document.getElementById('status_show').addEventListener('click', stopEvent, false);
}else {
//For IE
document.attachEvent('onclick', hideBox);
document.getElementById('status_hide').attachEvent('onclick', showBox);
document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
}
};
</script>
看完这个东西，我们的实现就差多了，我们为了避免事件处理，我们通过var 一个变量来控制是否执行事件的响应处理，这里是实现了功能，但是跨浏览器估计就差劲了。 

对浏览器的支持性做必要的检查

if (Netscape) {

     use Netscape model

} else if (Explorer) {

     use Microsoft model

}

访问这个事件所以你可以读出他的属性，通常你的事件处理程序开始如下：

function doSomething(e) {

   if (!e) var e = window.event // e refers to the event

}

读取他的属性

function doSomething(e) {

       if (!e) var e = window.event

       if (e.keyCode) code = e.keyCode;// for ie 

       else if (e.which) code = e.which;   // for netScape

}

希望事件冒泡。如果不希望发生事件冒泡，那么就阻止他：

function doSomething(e) {

    if (!e)  var e = window.event // handle event

   e.cancelBubble = true;

    if (e.stopPropagation)

   e.stopPropagation();

}