【译】jquery基础教程（jquery fundamentals）——(第五部分)Jquery事件

Jquery 基础教程

                                           作者Rebecca Murphey

                                           原文链接地址http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright © 2011

 

Jquery事件

概述

    jquery为选择结果附加事件处理器提供了简单的方法。当事件发生的时候，提供的方法被执行。在方法内部，this关键字指向被点击的元素。

    获得关于jqueyr事件的细节，可以访问http://api.jquery.com/category/events/.

    事件处理函数可以接收一个事件对象。这个对象能够被用来确定事件的特性，并且阻止事件的默认行为。

   获得关于事件对象的细节，可以访问http://api.jquery.com/category/events/event-object/.

关联事件和元素

   jquery为大多数的常用事件提供了便捷的方法，这些方法将会是你以后最常用的。这些方法——包括：$.fn.click,$.fn.focus,$.fn.blur,$.fn.change,等——对于jquery的$.fn.bind方法来说是速记方法。当你想给事件处理器提供数据的时候，当你使用客户端事件的时候，或者是当你想传递一个多事件和多处理方法的对象的时候，Bind方法对于绑定相同的处理方法到多个事件上是非常有用的。

例5.1：通过简便的方法事件绑定

$('p').click(function() {

    console.log('click');

});

例5.2：通过$.fn.bind方法进行事件绑定

$('p').bind('click', function() {

    console.log('click');

});

例5.3：通过$.fn.bind方法进行带数据的方法绑定

$('input').bind(

    'click change',  // bind to multiple events

    { foo : 'bar' }, // pass in data

    function(eventObject) {

        console.log(eventObject.type, eventObject.data);

        // logs event type, then { foo : 'bar' }

    }

);

连接一次性执行的事件

   有时候你需要一个特殊的处理方法只执行一次——之后，你希望没有处理方法执行，或者希望一个不同的处理方法执行。jquery提供了$.fn.one方法来完成这个目的。

例5.4：通过$.fn.one来转换处理方法

$('p').one('click', function() {

    console.log('You just clicked this for the first time!');

    $(this).click(function() { console.log('You have clicked this before!'); });

});

   $.fn.one方法在你需要在一个元素被第一次点击进行一些复杂的设置，而随后的点击并不会发生的情况下是特别有用的。

分离事件

   你可以通过$.fn.unbind方法并且传递事件的类型来分离一个事件和处理方法。如果你个一个事件添加了一个有名称的函数，你可以将它作为第二个参数传递来进行分离事件。

例5.5： 解除选择结果上的所有click事件处理方法

$('p').unbind('click');

例5.6：解除某个特定的click处理方法

var foo = function() { console.log('foo'); };

var bar = function() { console.log('bar'); };

$('p').bind('click', foo).bind('click', bar);

$('p').unbind('click', bar); // foo is still bound to the click event

命名事件空间

   在一些复杂的应用和一些和他人共享的控件中，为了防止对你不知道或者是不可能了解的事件进行了错误的解除。对事件进行命名空间设置是非常有用的。

例5.7：命名事件空间

$('p').bind('click.myNamespace', function() { /* ... */ });

$('p').unbind('click.myNamespace');

$('p').unbind('.myNamespace'); // unbind all events in the namespace

绑定多个事件

  在你的应用中经常会给元素绑定多个事件，每个都有不同的函数来处理事件。这种情况下，你可以传递一个包含一个或多个键值对的对象给$.fn.bind，对象中的键是事件的名值是处理事件的函数。
例5.8：绑定多个事件

$('p').bind({

    'click': function() { console.log('clicked!'); },

    'mouseover': function() { console.log('hovered!'); }

});

注解：

上例的方法在jquery1.4.4中才被引入

事件处理函数的内部

    在概述中我们提到，事件处理函数接收一个对象，它包含许多属性和方法。事件对象大多数情下被用来通过默认阻止方法来阻止事件的默认动作。事件对象包含大量的其他有用的属性和方法，包括：

pageX,pageY

    事件发生时鼠标相对于页面左上角的位置。

type

   事件的类型（例如 “click”）

which

   被按下按钮或者是按键

data

   任意在事件被绑定的时候传入的数据

target

   发起事件的DOM元素

preventDefault（）

   防止事件的默认动作

stopPropagation（）

   阻止事件冒泡到其他元素

 

   除了事件对象之外，事件处理函数也可以通过它关键字this来访问被处理函数绑定的DOM元素。为了应用jquery的方法，我们可以将DOM元素转换成一个jquery对象，简单通过$(this)，如下：

var $this = $(this);

  防止链接被跟踪

$('a').click(function(e) {

    var $this = $(this);

    if ($this.attr('href').match('evil')) {

        e.preventDefault();

        $this.addClass('evil');

    }

});

触发事件处理器

   jquery提供了一个不用用户操作，通过$.fn.trigger来触发绑定到元素的处理器。当这个方法被使用的时候，不可以简单的调用被绑定的作为click处理器的函数。而是应该将你要调用的函数存储到一个变量中，然后在你绑定的时候传递变量的名字。然手你就可以随意的调用函数本身，而不必需要$.fn.trigger。

   正确的触发事件处理器

var foo = function(e) {

    if (e) {

        console.log(e);

   } else {

        console.log('this didn\'t come from an event!');

    }

};

$('p').click(foo);

foo(); // instead of $('p').trigger('click')

通过事件委托提高性能

   在开发中你会经常的项页面中添加新元素，当你这样做的时候，你也许同时会需要绑定事件到这些元素——这些事件是绑定到页面原来存在的元素。不需要在每次添加新元素的时候都绑定事件，而是通过事件委托的方式来解决问题。通过事件委托，将事件绑定到一个容器元素上，然后，当事件发生的时候，寻找它发生在哪个包含它的元素上。如果你觉着这听起来很复杂，不要害怕，jquery提供了$.fn.live和$.fn.delegate方法来使它变的简单。

    大多数人发现，当通过事件委托的方式来解决向页面中添加元素后，即使你没有向页面中添加元素，这种方法也会对程序的性能带来提升。将数百的事件处理器绑定到个别的元素上变成了轻而易举的小case；如果你有大量的元素，你就该考虑委托相关的事件给容器元素。

注解：

$.fn.live方法是在jquery1.3的版本被引入的，那时只有几个特定的事件类型支持。到了jquery1.4.2的时候，$.fn.delegate方法就可以使用了，并且它也是更棒的方法。

   通过$.fn.delegate进行事件委托

$('#myUnorderedList').delegate('li', 'click', function(e) {

    var $myListItem = $(this);

    // ...

});

   通过$.fn.live进行事件委托

$('#myUnorderedList li').live('click', function(e) {

    var $myListItem = $(this);

    // ...

});

   解除委托绑定事件

   如果你需要移除被委托的事件，你可以轻易的解除它们。相应的，用$.fn.undelegate来解除$.fn.delegate绑定的事件委托，用$.fn.die来解除$.fn.live绑定的事件委托。在绑定的时候，你可以随意的传递被绑定函数的名称。

解除绑定事件委托

$('#myUnorderedList').undelegate('li', 'click');

$('#myUnorderedList li').die('click');

事件帮助工具

     jquery提供了两个事件相关的帮助函数，它们会节省许多你敲击键盘的声音。

$.fn.hover

   $.fn.hover方法允许你在某个元素触发鼠标进入或者离开事件的时候，执行一到两个函数执行。如果你传递一个函数来执行，这个函数会被同时绑定到两个事件上；如果你传递两个函数，第一个会绑定到鼠标进入事件上，第二个会绑定到鼠标移除事件上。

注解：

jquery1.4版本之前，$.fn.hover方法需要两个函数。

  hover帮助函数

$('#menu li').hover(function() {

    $(this).toggleClass('hover');

});

$.fn.toggle

   $.fn.toggle方法通过click事件来触发，并且接收两个或者更多的函数。每次click事件发生，被绑定的事件队列会依次执行。一般情况下 ，$.fn.toggle是接收两个函数；但是它有时间会发生接收了无限个函数的现象。所以，要特别小心，尤其是过多的函数队列在调试的时候也是个难题。

    toggle帮助函数

$('p.expander').toggle(

    function() {

        $(this).prev().addClass('open');

    },

    function() {

        $(this).prev().removeClass('open');

    }

);

练习

创建一个输入提示（hint）

   （下文中的地址是按照文章开头给原始文章地址来的即http://jqfundamentals.com/ ）

     在浏览中打开/exercises/index.html文件。用/exercises/js/inputHint.js或者Firebug。你的任务是用搜索输入（input）标签中文本来为搜索输入（input）创建“hint”文本。步骤如下：

  1.将搜索输入（input）的值添加到label元素的文本中

  2.给搜索输入（input）添加一个名为“hint”的class

  3.移除label元素

  4.绑定一个focus事件到搜索input上，用来移除hint的文本和class

  5.绑定一个blur事件到搜索input上，用来存储hint文本，如果没有没有文本则存储hint的class

如果你正在为一个真正的网站来实现这个功能，想想还有什么其他需要考虑的。

  添加标签导航

   在浏览器中打开/exercises/index.html。用/exercises/js/tabs.js。你的任务是为两个div模块元素创建标签导航。实现：

  1.隐藏所有的模块

  2.在第一个模块之前创建一个无序的列表元素。

  3.用$.fn.each遍历模块。对于每个模块，用h2元素标签中的文本作为你添加到无序列表中的每条文本

  4.绑定一个click事件到列表项：

        1）展示相关的模块，隐藏其他的模块

        2）给被点击的列表项添加一个”current”类

        3）移除其他列表项的”current”类

   5.最后，显示第一个标签