详解jQuery中的事件

大致介绍

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

jQuery中的事件

加载DOM

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

1、执行时机

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

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

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

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

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

2、多次使用

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

3、简写方式

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

事件绑定

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

第一个参数是事件类型

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

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

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