详解jQuery中的事件(jquery1)

推荐整理分享详解jQuery中的事件(jquery1)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery中的事件,jquery中的事件有哪些,jquery处理事件,jquery?,jquery用处,jquery实例,jquery中的事件有哪些,jquery实例,内容如对您有帮助，希望把文章链接给更多的朋友！

大致介绍

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

jQuery中的事件

加载DOM

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

1、执行时机

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

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

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

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

2、多次使用

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

3、简写方式

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

事件绑定

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

第一个参数是事件类型

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

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

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

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

简写：

合成事件

1、hover()方法

用于模拟光标悬停事件。当光标移动到元素上时触发第一个函数，当光标移出元素时，会触发第二个函数

2、toggle()方法

用于模拟鼠标连续单击事件，当鼠标第一次点击元素，触发第一个函数，当鼠标点击同一个函数时触发第二个函数

阻止事件冒泡和阻止默认行为

1、阻止事件冒泡

stopPropagation()方法

2、阻止默认行为

preventDefault()方法

注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为

　　　2、jQuery不支持事件捕获

事件对象的属性

1、event.type

　　　改方法的作用是获取到事件的类型

2、event.target

获取到触发事件的元素

3、event.relatedTarget

获取相关元素

4、event.pageX和event.pageY

获取到光标相对于页面的x的坐标和y的坐标

5、event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键

移除事件

unbind()方法语法： unbind([type],[data]);

　第1个参数是事件类型，第2个参数是将要移除的函数

　看一个例子，为div1绑定如下事件

1、如果没有参数，则删除所有绑定的事件

$('#div1').unbind();//删除所有事件

2、如果提供了事件类型作为参数，则只删除该类型的绑定事件

$('#div1').unbind('mouseover');//删除mouseover事件

3、如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的时间处理函数会被删除

模拟操作

1、常用模拟

在jQuery中可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件

$('#btn').trigger('click');

2、触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

3、传递数据

4、执行默认操作

$('input').trigger('focus');

以上代码会触发input元素的focus事件，也会使<input>元素本身得到焦点

如果只想触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作可以使用triggerHandler()方法

其他用法

添加事件命名空间，便于管理

例如可以把元素绑定的多个事件类型用命名空间规范起来