详解jQuery中的事件

大致介绍

jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力

jQuery中的事件

加载DOM

在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的，但是他们也有一些不同点

1、执行时机

例如我们有一个有很多图片的网页

$(document).ready()方法是在这个网页的DOM树加载完就可以执行的，而window.onload方法必须在DOM树加载完和图片都加载完才执行

如果使用jQuery我们想要在整个页面加载完在执行可以使用load()方法

下面两段代码的功能是一样的

      // jQuery
      $(window).load(function(){
        // 代码1
      });
      // JavaScript
      window.onload = function(){
        // 代码2
      };

2、多次使用

JavaScript的onload事件一次只能保存对一个函数的引用，而$(document).ready()可以保存多个

      function one(){
        alert('1');
      }
      function two(){
        alert('2');
      }
      // JavaScript
      window.onload = one;
      window.onload = two;//只执行two()
      // jQuery
      $(document).ready(function(){
        one();
      });
      $(document).ready(function(){
        two();
      });//one() 和 two()都会执行

3、简写方式

$(document).ready(function(){});可以简写为$(function(){});

事件绑定

bind()函数的语法：bind(type,[.data],fn)

第一个参数是事件类型

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

用例子来看，有两个div，第二个div隐藏，当我们点击第一个div时，第二个div显示

  <div id="div1"></div>
  <div id="div2"></div>
  <script type="text/javascript">
  $(function(){
    $('#div1').bind('click',function(){
      $(this).next().show();
    });
  });

增加功能，当点击div1时如果div2是显示的，则隐藏它，否则就显示它

  $(function(){
    $('#div1').bind('click',function(){
      if($(this).next().is(':visible')){								 
 1/3    1 2 3 下一页 尾页