javascript关于事件与闭包

现状：IE9以及其他都是先DOM2级事件模块的核心部分。

概念：事件流；描述的是从页面中接受事件的顺序，ie的事件流是事件冒泡流，Netscape的事件流是事件捕获流。标准指定者为了照顾，所以规定事件的执行是先捕获，后冒泡。

1.事件执行顺序

前提：DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。

捕获的思想是尽早接受到事件，

响应：带有on前缀的事件监听器，onclick，onload

注意：处于阶段是指最里层的目标元素，它的事件执行顺序按照绑定的顺序执行

事件的委托：在一个复杂的web应用程序中，如果对很多元素的都进行获取id绑定事件，那将非常繁杂，利用委托可以简化：只需在DOM树中尽量最高的层次上添加一个

事件处理如：

只取一个dom元素，占用更少内存，更加简洁

2.阻止事件冒泡，事件流阻止,取消事件的默认行为，和事件函数的接触绑定

事件对象是否可以取消，要通过Event.cancelable属性表示。

事件监听器可以调用Event.preventDefault()取消事件对象的默认动作（如果在IE下，Event.returnValue = false就可以；如果是非IE下，用Event.preventDefault()阻止。）。Event.stopPropagation()方法可以阻止事件向上冒泡。

Event.preventDefault()和Event.stopPropagation()，前者是通知浏览器不要执行与事件相关联的默认动作，比如submit类型的按钮点击会提交；后者是停止事件流的继续冒泡，但是它对IE8及以下IE浏览器支持不好。如果直接使用return false则表示终止处理函数。

另外stopPropagation 可以阻止事件在元素之间进一步传播，但是不能阻止事件函数在本元素内的执行（也就是A元素中的绑定事件会执行，但是a的子集或者父级元素不会在执行了）；但是stopImmediatePropagation会一并阻止。

setCapture 和 releaseCapture

这两个是 IE 下的事件绑定函数，只要我们在某个元素上 setCapture 了，那么你在任何地方的鼠标操作（mouseXXX之类的动作）都会在这个元素上触发（前提是你在这个元素上绑定了事件），releaseCapture 或者本窗口失去聚焦才会释放这个绑定~

事件解绑

原生JS绑定则对应运行removeEventListener()和detachEvent()

 var EventUtil = { 
      //注册 
      addHandler: function(element, type, handler){ 
        if (element.addEventListener){ 
          element.addEventListener(type, handler, false); 
        } else if (element.attachEvent){ 
          element.attachEvent("on" + type, handler); 
        } else { 
          element["on" + type] = handler; 
        } 
      }, 
      //移除注册 
      removeHandler: function(element, type, handler){ 
        if (element.removeEventListener){ 
                element.removeEventListener(type, handler, false); 
        } else if (element.detachEvent){ 
                element.detachEvent("on" + type, handler); 
        } else { 
                element["on" + type] = null; 
        } 
      }              
     };

3.jquery中的事件

绑定事件：

.bind() 　.delegate() 他们背后都是使用on的方式进行绑定，但是单独使用on的方式可能会出错

实例：


 $("#div1").bind('click',function(e){ 
          alert("div1 " + e.currentTarget.name); 
        });  
//jQuery这些事件委托的原理根据事件冒泡的机制，广播的时候所有的节点都会知道，到底发生了什么。

 $("body").delegate('#div1','click',function(e){
      alert("div1");
    });
    $("body").delegate('#div2','click',function(e){
      alert("div2");

参考：http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html

http://kb.cnblogs.com/page/199251/