《jQuery基础教程》-- 事件

1.通过bind方法，绑定事件到元素上。

例如：

$(document).ready(function(){$('#switcher-large').bind('click',function(){$('body').addClass('large');});});

这个例子中，绑定了click（点击事件）到id为switcher-large这个元素上。运行的函数是给body添加class：large。

2.通过this获取事件处理环境。

例如：

$('#switcher button').bind('click',function(){$('#switcher button').removeClass('selected');$(this).addClass('selected');});

这个例子中，通过$(this)获得了上文处理环境，即$('#switcher-button')这所取到的DOM元素。

3.可以通过简写事件方法来绑定操作，简化程序。

例如：

$('#switcher button').click(function(){$('#switcher button').removeClass('selected');$(this).addClass('selected');});

这里通过click方法简化了bind方法绑定的click声明。其作用是一样的，不过更加方便书写。

下面列举了所有绑定方法的简化方法：

blur() 模糊时，

change() 更改时，

click() 单击时，

dblclick() 双击时，

error() 出错时，

focus() 获得焦点时，

keydown() 键盘按下时，

keypress() 键盘敲击时，

keyup() 键盘抬起时，

load() 载入时，

mousedown() 鼠标按下时，

mousemove() 鼠标移动时，

mouseout() 鼠标移出时，

mouseover() 鼠标掠过时，

mouseup() 鼠标抬起时，

resize() 大小改变时，

scroll() 滚动时，

select() 选中时，

submit() 提交时，

unload() 上传时。

4.复合事件

复合事件包括了一系列封装好的依靠上述简单事件组合而成的方法组，方便开发使用。

4.1 toggle方法

toggle方法接受2个函数参数，它的作用就是每次单击依序运行toggle指定的一个function，即第一次点击，运行第一个函数参数所指定的方法，第二次点击运行第二个函数参数所指定的方法，第三次点击循环回第一个函数指定的方法执行。以此类推。

如：

$('#switcher h3').toggle(function(){$('#switcher button').addClass('hidden');},function(){$('#switcher button').removeClass('hidden');});

另外，如果仅仅是css样式的差别，那么使用toggleClass要优于使用toggle。

4.2 hover方法

hover方法和toggle方法类似，其目的是响应鼠标的移入和移出。其同样是接受两个参数，鼠标移入时运行第一个参数的方法，鼠标移出时运行第二个参数的方法。

使用连缀写法写到上面那个例子后面如下：

$('#switcher h3').toggle(function(){$('#switcher button').addClass('hidden');},function(){$('#switcher button').removeClass('hidden');}).hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');});

5.事件旅程

这是事件的一个比较重要的部分，个人理解就是：

在一个嵌套的元素中，父元素的响应会传递到子元素，然后再由子元素传递回父元素来完成响应。

其官方说法是：事件捕捉和事件冒泡。
而事件冒泡会带来一定的问题，如果给父元素增加了响应操作，那么事件会冒泡到子元素，导致子元素在没有添加这种响应操作的前提下，也默认存在了这种响应。

举个例子：一个div内包含了一个button，我们希望点击div达到隐藏div的效果，但是此时，如果直接在div下添加click事件，就会导致点击button的时候，div也隐藏了。这的确是个问题，而解决这个问题的方法就是指定事件目标：

$('#switcher').click(function(event){if(event.target == this){$('#switcher button').toggleClass('hidden');}});

这里给事件对象命名为event，而通过event.target来确定事件发生的目标，从而可以进一步判断。

当然，另一种处理方式是在具体的子元素中调用.stopPropagation()方法来阻止事件冒泡。

这里不得不谈到另外一种情况，如果子元素是一个<a>标签链接，或者form的submit此类方法。则需要用.preventDefault()来阻止默认操作。

6.通过unbind方法移除处理事件。

$('#switcher-narrow, #switcher-large').click(function(){$('#switcher').unbind('click');});

这里通过unbind移除了#switcher的click事件。

如果对于一个元素绑定了多个事件，则通过unbind移除特定的事件的时候，可以在绑定事件的时候使用事件的命名空间。如下：

$('#switcher').bind('click.collapse',function(event){if(!$(event.target).is('button')){$('#switcher button').toggleClass('hidden');}});

7.通过trigger方法模仿用户操作。

鼠标操作，如：

$('#switcher').trigger('click');

此例子通过trigger出发click操作。

另外键盘操作，应该使用keyup、keydown、keypress获得键盘监听。示例如下：

$(document).keyup(function(event){var key = String.fromCharCode(event.keyCode);if(key in triggers){$('#switcher-'+triggers[key]).trigger('click');}});

这个例子中通过keyup绑定键盘按下事件到document。通过event.keyCode获得按键所按下的按键代码（ASCII码），另外String的fromCharCode可以转换这个ASCII码为字符串类型。

 8.关于事件委托

事件委托简单说就是在访问页面时对于页面上使用js动态生成的事件，绑定相应事件的一种说法。给动态页面绑定事件一般有2种方法：重新绑定事件和事件委托。

jQuery中对于事件委托的方法，主要是live和delegate。

live的用法和bind一样。在绑定事件的时候，用live替换之前使用的bind即可，代码使用简单，这里就不举例了。

delegate的用法：

//事件委托方法 delegate$('#gallery').delegate('div.photo', 'mouseover mouseleave',function(event){var $details = $(this).find('.details');if(event.type == 'mouseover'){$details.fadeTo('fast',0.7);}else{$details.fadeOut('fast');}});

这里简要解释下delegate的三个参数：第一个是delegate所要匹配的会动态生成的元素。以后$(this)所调用的就是这个元素；第二个是所要委托的事件名，多个事件使用空格分开；第三个是处理方法，通过event.type可以获得所响应的事件名。

live和delegate的区别是：

1.live并不是绝对可靠的。有的时候给元素添加事件委托不一定会得到预期结果。

2.live会带来潜在的性能问题。

当然这并不是说live就一无是处，在一些简洁的代码中，使用live不仅可以保证高效的开发效率，也更容易理解。

9.自定义事件

jQuery中可以自定义事件，如下例所示：

//自定义事件$(document).bind('nextPage',function(event, scrollToVisible){var url = $('#more-photos').attr('href');if(url){$.get(url,function(data){var $data = $(data).appendTo('#gallery');if(scrollToVisible){var newTop = $data.offset().top;$window.scrollTop(newTop);}checkScrollPosition();});}pageNum++;if(pageNum < 20){$('#more-photos').attr('href','pages/'+pageNum+'.html');}else{$('#more-photos').remove();}});

这个例子定义一个名字叫做nextPage的事件。其接受2个参数，第一个参数是DOM扩展之后的事件对象，是必须的参数，而第二个是一个自定义参数，是可选的。如果在调用这个自定义参数的时候，没有指定第二个参数，那么这个参数就会为null，不会导致错误。

下面是通过trigger函数调用自定义事件函数的一种写法:

$(this).trigger('nextPage', true);

这里调用了这个自定义事件函数，并且传入了第二个参数。