详解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显示