JQuery事件处理

jQuery有几种绑定事件处理函数的方法，有什么区别:

第一种：

$(...).bind("事件名",fn)->addEventListener

特点: 为同一个元素的事件处理函数绑定多个函数对象

$(...).unbind("事件名",fn)->removeEventListener

强调: 如果有可能移除事件处理函数，则绑定时，必须用有名的函数绑定，不能用匿名函数。
重载1: 不带任何参数: 移除元素上所有事件处理函数绑定
重载2: 只带一个事件名称参数: 移除元素上指定事件名称绑定的所有函数对象
重载3: 带两个参数: 仅移除事件元素上指定事件名称绑定的执行的一个函数对象。

问题: 只能为页面上现有的元素绑定事件，动态新添加的元素无法自动绑定事件处理函数
解决: delegate

第二种：

事件代理: 让指定父元素下，所有符合要求的子元素，都能使用事件处理函数。（包括已有的元素和新生成的元素）

原理: 利用冒泡:
1. 仅将事件处理函数绑定在父元素上一次
2. 获得目标元素: e.target
3. 仅响应符合条件的元素的事件

  优: 减少事件监听的个数， 可让后生成的新元素自动响应事件
  何时: 只要希望一个父元素下指定的所有子元素都能响应事件时

  如何使用:
 $(parent).delegate("selector","事件名",fn)
 将事件绑定到parent上（利用冒泡），只有符合selector条件的元素才能响应事件，其中: fn: function(e){e.target//获得目标元素}

   $(parent).undelegate("selector","事件名",fn)

delegate vs bind

1. 优化: 创建事件监听对象的个数
   delegate: 仅在父元素创建一个事件监听，所有子元素公用
   bind: 为每个子元素分别创建事件监听
2. 效果:
   delegate: 新生成的子元素也可自动共享父元素的事件
   bind: 新生成的子元素无法自动获得事件处理函数
3. 一次性事件: $(...).one("事件名",fn)
   只能执行一次事件处理函数，执行后，自动解除绑定
4. (...).die("事件名",fn), 本质:同undelegate
5. 终极简化:
   问题: 仅为一个元素绑定事件处理函数: bind
   利用冒泡: delegate
   解决: 统一成了on
   1. 仅为一个元素绑定事件处理函数:
      $("target").on("事件名",fn)
   2. 利用冒泡:
      $("parent").on("事件名","selector",fn)
      解除绑定: off(...)
6. 简写: $(...).事件名(function(){...})
   问题: 仅少量常用的事件，可简写，如果遇到无法简写的事件，就要用on

其他

模式触发事件：触发被选元素的指定事件类型。

DOM: elem.onxxx();
    问题: 只能触发直接用onxxx绑定的事件处理函数，用addEventListener添加的事件监听，无法模拟触发
jq: $(...).trigger("事件名")
   其实可简写为: $(...).事件名

页面加载后执行

特殊: $(document).ready(function(){...})

鄙视题:
vs DOM: window.onload=function(){...}

    ready的底层事件是 DOM中的ondocumentcontentloaded，只要DOM树加载完成，js执行完毕就会触发。 而onload: 必须等到html,css,js,img全部加载完成才触发。

优化: 可将原来在load之后才执行的任务(事件绑定，修改DOM树)，提前到ready之后执行，可缩短页面整体加载时间。

   如何使用: $(document).ready(function(){...})
             简: $().ready(function(){...})
             更简: $(function(){...});

 其实: 只要将script放在body的结尾，就可实现DOM加载后立刻执行。

hover

 一个事件hover， 其实就是mouseover和mouseout的合体，所以,hover要绑定两个事件处理函数

何时使用: 只要同时响应mouseover和mouseout时，就可简写为hover