JS的addEventListener以及jquery的delegate

JS中的addEventLIstener

addEventListener为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序，在以前我们一般是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName， 而在 DOM 中，我们用 addEventListener（IE 中用 attachEvent）。

语法

target.addEventListener(type, listener, useCapture);

• target 文档节点、document、window 或 XMLHttpRequest。
• type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
• listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
• useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false。

• addEventListener－event 对象的属性和方法

  
  

  事件触发时，会将一个 Event 对象传递给事件处理程序，（

  Listener自带的参数，当触发Listener事件时就会自动传这个参数到这个方法

  ）比如：
  document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
  PS：以前我一直不理解function参数中的event到底是谁传给他的，原来是target把该事件默认的传递并调用该函数，应该是内部自动实现的；

  事件类型

  DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent，不同的事件有不同的属性和方法，但常用的来说我们都不会用错，比如我们不会在鼠标事件中去取键盘值（Ctrl、Alt、Shift 除外），所以我们没有必要深究。

  
  

  jquery的delegate
  

  delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

  使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

  语法

  $(selector).delegate(childSelector,event,data,function)

  参数	描述
  childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
  event	必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
  data	可选。规定传递到函数的额外数据。
  function	必需。规定当事件发生时运行的函数。

  
  

  
  

  可以看出：

  js中的addEventListener以及Jquery的delegate的参数不同：

  但是它们都同时有两个参数：事件类型和事件处理，即type和function

  JS增加了一个是否时间冒泡的判断，，在其方法实现中，判断子类，

  delegate增加了一个子类选项，

  PS:我还是喜欢用Jquery！