你的位置:首页 > 软件开发 > Java > 第4章 jQuery的事件和动画——事件篇

第4章 jQuery的事件和动画——事件篇

发布时间:2016-10-03 02:00:23
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力一. jQuery的事件1. $(document).ready(function(){})加载方式再次回到window.onload和$(document).ready(function(){} ...

jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力

一. jQuery的事件

1. $(document).ready(function(){})加载方式

再次回到window.onload和$(document).ready(function(){})的比较中,后者是jQuery最重要的事件函数。另外,诸如图片未加载完毕,导致涉及图片宽高的属性无法被jq调用,可以使用load()方法。

bind方法三个参数:

第一个是事件类型(包括blur、focus、load、resize.....)——JavaScript的事件把on去掉就是jQuery的事件

第二个参数可选作为event.data。

css

 

1
jq

唯一的区别就是代码量。

3.合成事件

hover和toggle——后者在1.8+版本不再支持。

 

(1)hover()方法

hover(fn1,fn2)

hover用于模拟鼠标悬停/离开的过程,悬停时触发fn1,离开时触发fn2。如果我想把例4.1的代码改写成悬停离开的形式,可以使用hover

1

hover的目标不是替代mouseover和mouseout。hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。

(2)toggle()方法(已废弃,稍微了解下)

toggle(fn1,fn2,fn3....)

第一次单击触发fn1,第二次触发fn2...

4. 事件对象的属性

jq引入也event参数————它其实是一个只有事件处理函数才能访问的事件对象。函数执行完毕后,event将被销毁。

(1)event.type——可以获取事件的类型

(2)event.preventDefault()方法—阻止默认行为

jq提供了preventDefaut方法。

表单是阻止默认行为最多的地方之一。

1

这里的代码中,点击提交按钮,就会跳转到form预定的网址。我们需要在用户名和密码为空的时候,阻止跳转。

1

简单地说就是多个有直系从属关系的对象响应同一个事件。子集发生事件后不断往父级传递。最具体的对象首先被响应。事件冒泡给实际应用带来麻烦。

阻止事件冒泡在js中运用的是cancelBubble方法。通过引入event——

1

 在jQuery中,提供了stopPropagation。

1

(4)event.target——获取触发事件的元素

比如一个超链接中href指向一个网址。以此对象采用$('a').target得到的是这个网址。

(5)event.relatedTarget

在事件中涉及的其它任何DOM元素。

第一个参数type表示事件类型,第二个表示要移除的函数。

如果什么参数都不写,直接移除所有的绑定事件。假设绑定的点击事件有fn1和fn2两个函数,如下:

 

1

按钮btn在被点击时,不再执行名字为fn1的函数。fn2依然在点击时继续执行。

对于仅仅执行一次的函数,可以不用bind方法来绑定。而用one()方法。

 

1

btn在被点一次之后,再怎么点都不会执行fn1了。

6.模拟操作————trigger()方法

(1)trigger()方法介绍

常见的比如当用户鼠标划过某处就加载页面时弹出第二个页面,或者按下enter执行发送信息。就调用了模拟click的方法。

 

1

按钮btn在没被点击时(也许页面加载同时),就发生了click事件——很讨厌对吧。

(2)自定义事件

trigger()方法相当有意思。你可以自行DIY一个事件,然后用trigger()执行。

 

1

(3)参数的传递

1
1

也就是说,相同的函数,不同的事件,可以写在一起。

(2)命名空间

也就是前面说的DIY一个事件,其实可以作为命名空间。

1

以上代码只取消了click事件(通过命名空间)但不取消dbclick事件。

(3)相同事件,不同命名空间

把上面的代码改一改;

 

1

如果单击btn1,click和click.haha两个函数都发生。单击btn2,只发生没有命名空间的click事件。因此fn1不会发生。

原标题:第4章 jQuery的事件和动画——事件篇

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录