大家可以参考一下两个博文，深入学习。

JS实现监听者模式或观察者模式

设计模式学习----观察者模式（事件监听实现）

javascript事件监听模式

我在这里做些基础性的总结。

首先，什么是事件监听？

一个元素有一个事件 触发的时候 浏览器直接解释执行就完了呗 为什么还要监听？？意义 何在？ 监听到底是干什么的？跟后台有关系？

比如说一个页面上有什么东西,其中有一个按钮,按钮被点击,我们希望能够知道并做一些操作 这个就叫做按钮的点击事件监听 比如如下代码 按钮元素 有一个onclick事件(就是点击事件)

（JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：onClick;onChange；onSelect；onFocus；onBlur；事件驱动） 当点击了 执行函数DoClick 这就是上面的说的监听他的点击事件,并进行操作处理!(至于后台,比如说我点击了按钮,向后台提交一些数据如用户名 密码等)（说白了就是事件触发了一个函数）

浏览器直接执行的过程就需要你告诉它某个事件发生时干什么好呢。 就表示"你正在监听 click 事件", on 表示当事件发生时，这个名字叫得很容易理解了。

但这种写法一次只能放一个函数在上面，写成逗号隔开的也当成一个函数的函数体。像另一楼"三间房” 说的那样，用 attachEvent 可以将多个 event handler （监听函数) 添加到事件监听的队列中去，各自互不相干。

参考JS事件监听机制

Netscape制订了JS的事件驱动机制，事件捕获；

后来IE独创了规则，事件冒泡

接着，W3C融合两者特点，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶(Capture)”；

执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

（IE兼容性问题之一）

（IE9可用w3c的标准实现），

那么，怎么绑定事件呢？

由于这两派浏览器的差异，其绑定的方法也不一样，其中，遵循标准的浏览器使用W3C定义的addEventListener函数绑定，函数定义如下：

function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]) eventFlag : 事件名称，如click、mouseover…（没有on前缀） eventFunc: 绑定到事件中执行的动作 useCapture: 指定是否绑定在捕获阶段，true为是（捕获）；false为否（冒泡）。默认为true 遵从W3C标准的浏览器里 在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法

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

detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀

总结：addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])，针对ff，chrome，safari浏览器。false指冒泡阶段，true指捕获阶段。默认为true。不过一般我们都用false。

 attachEvent(string eventFlag, function eventFunc)，针对ie系列、还有opera浏览器，少了事件处理机制的参数，只指定事件类型（别忘了on）和触发哪个函数。

有了这些认知之后，有了大致的思路，对应的代码：

if(document.addEventListener){

document.addEventListener('click', hideBox, false);

在document绑定信息框（竖的那个）隐藏函数（即随便点html页面的哪里关闭展开的信息框，这也是使用document.addEventListener的原因，要帮在文档上）

document.getElementById('status_hide').addEventListener('click', showBox, false);

在status_hide节点绑定信息框展开(详细的那个)函数并停止事件流（即点击竖的这个，展开详细的那个）

document.getElementById('status_show').addEventListener('click', stopEvent, false);

因为false确定的是事件冒泡，为了防止点详情的时候，向上冒泡到document，触发document设置的click时hidebox方法，在status_show我们要绑定阻止事件流函数。

}

这个明白了，针对ie再写个attachEvent的就可以了，当然ie的参数只用2个就可以了，它的时间处理机制就是冒泡不用额外设置。

最后要说说这段函数。

var stopEvent = function(event){ e = event || window.event; if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } };

可以确定它的作用是防止前面提到的冒泡，引发不该引发的click事件。

可是它呢function(event){e = event || window.event}

参考js中的冒泡事件与事件监听 

理解一下冒泡事件：DOM就是冒泡执行的。

这个例子很好，下面有粘来JavaScript中的事件冒泡

点击

监听模式

事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 btnAdd.οnclick="alert(’51obj.cn’)"就是一种简单的附加事件，只不过这种方法不支持附加多个事件以及删除事件。以下代 码将实现附加事件后删除事件（IE下）：

点击

var oBtn; window.οnlοad=function(){ oBtn=document.getElementById("btn"); if(window.addEventListener){ oBtn.addEventListener("click",Click,false); }//FF,Opera… else if(window.attachEvent){ oBtn.attachEvent("onclick",Click,false); }//IE else{ oBtn.οnclick=Click; }//Other } function Click(){ alert("事件只执行一次"); if(window.addEventListener){ oBtn.removeEventListener("click",Click,false); }//FF else if(window.attachEvent){ oBtn.detachEvent("onclick",Click); } else{ oBtn.οnclick=null; } } //–> www.51obj.cn»»

Javascript中的事件有它的独特性，就是有默认执行事件，比如冒泡事件就是一个。在有些应用中，停止事件的冒泡(或捕获)被证明在复杂的应用程序中是极其有用的。不幸的是，IE提供了一种与所有其它浏览器不同的方式来阻止事件冒泡。以下是一个通用的取消事件冒泡的函数。该函数接受单个参数：传递到事件处理程序的事件对象。该函数处理取消事件冒泡的两种方式：标准的W3C 方式和非标准的IE方式。

停止事件冒泡的通用函数：

下面是使用这个方法取消冒泡时间的例子：

bubble就是从哪点，就从哪里往上走

为什么要用以上的监听方法呢，html自身所带的监听又有什么缺点呢？

几种常见的绑定方法：js 事件绑定的方法

为节点绑定事件的几种方法

1、html内嵌法

  顾名思义，就是在html代码里节点代码里绑定事件。如下面代码

  需要注意的是，onclick后面的function赋值是需要添加括号的，否则事件无法绑定和触发。

  如果onclick需要连续执行多个操作，可以按如下方法绑定事件。

   其中的“JavaScript：”也可以不加，具体原因，待查。

   其中关于事件参数的传递和设置请参看 window.event 的介绍。

2、动态绑定

   在很多时候，我们需要动态的创建节点，然后将某个或某几个事件绑定在该新建对象上。动态绑定又包含两种方式：

   1、直接为对象赋值

   2、使用两个重要的Js函数：attachEvent 和 addEventListener。

   方法1和2的区别在于，如果连续执行如果执行如下的连续方法1赋值操作，最后的结果是只有test3被绑定给了对象。

   而方法2如果采用相同的连续赋值方式，则会产生追加的效果，事件触发是的执行顺序，由下至上。

   另外对于方法1，我们要注意，赋给“onclick”的值只是一个“引用“，一定不能加括号，否则事件就会被执行，而赋给onclick的就是事件执行的返回结果了。

对于方法2我们来详细了解下。两种js方法，在IE下可用attachEvent，在FF下则要用addEventListener。

    attachEvent()有两个参数

    addEventListener()有三个参数

     html代码

     js代码

window.οnlοad=function(){    document.getElementById("div_test").addEventListener("click",test1,false);   document.getElementById("btn_test").addEventListener("click",test2,false);

        }

        function test1(){ alert("外层div触发") }

        function test2(){ alert("内层input触发") }

     如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。

    请看如下示例代码。

点击按钮后，事件执行的顺序是 test1-->test2。

因为IE和Firefox绑定事件的方法不一样，所以需要判断浏览器类型。具体方法参见：浏览器类型判别。