三步实现jQuery方式处理事件

jQuery极大增强并扩展了基本事件的处理机制，同时也让我们从恼人的兼容性问题中大大地解放。更好的消息是，jQuery进行事件处理更加简单易用，废话不多说，我们下面看如何用三步进行jQuery的事件处理。

选择元素

用户在Web页面中通常是和页面的元素进行交互的，比如点击某个按钮，移动到某个div，点击链接等等。当分配事件的时候，我们第一步要做的就是选择该元素。

jQuery支持使用css选择器来选择我们想要操作的页面部分，例如：

$('#id-name')      //通过id选择器
$('.class-name')   //通过类选择器
$('a')             //通过元素选择器

为元素分配事件

在选择一个元素之后，接下来就是为该元素分配指定的事件，事件的种类很多。例如当我们的鼠标移动到某个<a>链接上时：

$('a').mouseover()

当我们点击id为button1的按钮时：

$('#button1').click()

为事件传递函数

第二步只是指定了元素的某个事件，但是当该事件触发时具体做什么我们还没有指定。这一步就是为事件指定处理函数，即当事件触发时，执行该函数的操作。

比如，当我们鼠标移动到导航栏时，显示隐藏的id为submenu的子菜单：

$('#mainmenu').mouseover(function(){
    $('#submenu').show();
  }
);

上面是使用传入匿名函数作为参数的方法，当然我们也可以传递之前定义好的函数名，以上代码可以重写如下：

function showSubmenu(){
  $('#submenu').show();
}
$('#mainmenu').mouseover(showSubmenu);

这里需要注意，在将函数名指定为事件处理参数时，是没有圆括号的。不知大家还记不记得，如果我们传入带圆括号的函数，那么该函数会立即执行，传入的参数实际上是该函数执行的结果。而没有圆括号，传入的是函数的引用。

$(document).ready()与window.onload

当文档完全下载到浏览器时，会触发window.onload事件，此时，页面上全部元素对于JavaScript而言都是可操作的。 $(document).ready()与之类似，但是有着微妙的差别。     $(document).ready()会在页面DOM准备就绪的时候就可以使用了。当页面需要加载较多的资源的时候这种差异便会体现出来。

比如我们在加载相册类的界面的时候，使用window.onload要等到每一幅图片都加载完毕才会触发该事件，这通常需要数秒的时间。如果在这之前用户进行了某种页面的操作，这些结果都是不可预料的。但是使用$(document).ready()会在DOM树解析完成时即可，也就是说页面会“更早地准备好”。

通常情况下$(document).ready()是一个更好的方法，作为jQuery初学者只需要知道每次把需要执行的代码放在以下片段即可：

$(document).ready(function() {

}); // end ready
 
 
1
2
3

由于$(document).ready()十分常用，可以简写为以下形式：

$(function(){

});
 
 
1
2
3

但是 (document).ready()这种写法会更清楚地表明  $( document).ready()是在document的jQuery对象上调用.ready()方法的代码过程。初学者没太大必要做这样的简化。

this和$(this)

this几乎是在所有语言中都随处可见的一个关键字，它的含义也万变不离其宗。在jQuery中，this引用正在调用匿名函数的元素。比如说：

$('#button1').click(function(){
  $(this).val("OK!");
});
 
 
1
2
3

上面的代码中的this就是对id为button1的按钮元素的引用。

$(this)则是this引用元素对应的jQuery对象，在jQuery中，对元素的操作是通过对应的jQuery对象实现的。this的使用十分常见，后面我们会举例说明。

常用的hover()和toggle()

hover()

在鼠标事件中，mouseover和mouseout事件通常组合使用。例如，当光标移动到某menu上，出现一个下拉菜单，移出时隐藏该下拉菜单。这样的组合十分常见，jQuery提供了一种简单的方式——hover()。

hover()接收2个函数作为参数，第一个函数表示当鼠标移动到该位置时执行的操作，第二个函数表示鼠标离开时所要执行的操作。我们以上面的menu操作为例，当鼠标移动到menu按钮时，弹出下拉菜单，移出时，隐藏下来菜单：

$('#menu').hover(
  function(){
    $('#submenu').show();
  },
  function(){
    $('#submenu').hide();
  }
);
 
 
1
2
3
4
5
6
7
8

该事件可以用以下图示表示：

toggle()

toggle()与hover()的用法十分相似，它接收若干个函数作为参数。第一次点击时执行第一个函数，第二次点击时执行第二个函数……，当执行到最后一个函数的时候，循环回第一个函数。

我们常用的是传入2个函数作为参数，比如第一次点击某个标题，显示段落内容，再次点击隐藏段落内容：

$('.h2').hover(
  function(){
    $(this).next(.content).show();
  },
  function(){
    $(this).next(.content).hide();
  }
);
 
 
1
2
3
4
5
6
7
8