JS 事件

与浏览器交互的时候页面会触发各种事件。比如比较常用的‘load’,'click','change','scroll'等。

1.事件冒泡

要理解事件冒泡，得先理解事件流的定义。事件流是指页面接收事件的顺序。

而事件冒泡则是指开始时事件由最具体的元素接收，然后向上层一级级传播，到不具体的元素。例如：div-->body-->html-->document-->window。现代所有浏览器都支持事件冒泡。事件冒泡可以理解为一个气泡从水底慢慢向上冒的过程。

2.事件捕获

事件捕获的思想跟事件冒泡相反。由不具体的最上层的节点接收，慢慢向下层捕获，最后收到事件的是最具体的节点。例如:document-->html-->body-->div。目前IE9-不支持事件捕获。“DOM2级事件”规范要求事件应该从document开始向下传播，但是大部分浏览器都是从window对象开始的。

考虑到兼容IE，建议都使用事件冒泡。

3.DOM事件流

“DOM2级事件流”包括事件捕获阶段，处于目标阶段，事件冒泡阶段。例如:Document-->html-->body-->div-->body-->html-->document。这三个阶段都有可能触发事件。

4.事件处理程序

响应某个事件处理的函数就叫事件处理程序。

“DOM0级“事件处理程序很简单，只在冒泡阶段处理。写法如:elem.onclick = function(){}。

”DOM2级“事件处理程序定义了两个方法，addEventListener和removeEventListener可以同时绑定或删除多个事件处理程序，并且按照添加顺序依次处理。

addEventListener(name,func,bool),removeEventListener(name,func,bool)接受三个参数：第一个参数是要处理的事件名称（如click,scroll,change等），第二个参数是事件处理的函数，第三个参数是布尔值，true表示在事件捕获阶段调用事件处理程序，false表示在事件冒泡阶段调用事件处理程序，一般默认false。

IE的写法：attacheEvent(name,func),detachEvent(name,func)接受两个参数：第一个参数表示事件处理程序的名称，用”on“开头（如onclick,onload等）。第二个参数表示事件处理函数。IE中添加的事件处理程序只会被添加到事件冒泡阶段。

IE与DOM写法不同，除了事件的名称有"on"开头之外，还有个很大的区别就是事件处理函数的作用域。使用attachEvent()时，事件处理函数是在全局作用域window中执行，所以this就是window。

attachEvent()也能添加多个事件处理程序，但是事件的执行顺序与添加顺序相反。

5.event事件对象

在触发DOM上的某个事件时，会产生事件对象event，这个对象包含着所有和这个事件有关的信息。不过IE又有不同的写法。event有很多属性，下面列出几个常用的。

1.事件对象

标准：event

IE:window.event

2.事件目标元素

标准：event.target,event.currentTarget,前者指事件的真正目标，后者指当前目标。利用target可以做事件代理。

IE：event.srcElement

3.阻止事件的默认行为

标准:event.preventDefault()

IE：event.returnValue = false;

4.阻止事件中DOM层中的传播

标准：event.stopPropagation()

IE:event.cancelBubble = true;

6.事件委托

事件委托就是处理”事件程序过多“的问题的。事件委托利用事件冒泡，在冒泡的某个元素上，只指定一个事件处理程序，就可以管理某一类型的所有事件。

代码组件：

var EventUtil = {
　getEvent: function(e){
　　return e ? e : window.e;
  },

  getTarget: function(e)[
    return e.target || e.srcElement;
  },

  preventDefault: function(e){
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue = false;
    }
  },
  
　stopPropagation: function(e){
  　if(e.stopPropagation){
　　　　e.stopPropagation();
　　}else{
　　　　e.cancelBubble = true;
　　}
  },

  addHandler: function(element, type, handler) {
    if (element.addEventListener) {  // DOM2
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {  // IE
      element.attachEvent('on' + type, handler);
    } else {  // DOM0
      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;
    }
  }
};

转载自：http://www.cnblogs.com/zichi/p/4713038.html