jquery增加并扩展了基本的事件处理机制,并且提供了更加优雅的事件处理语法,极大地增强了事件处理能力,让你不必考虑不同浏览器事件的不同实现机制,更好地支持多浏览器。
1、入门:加载DOM
很多时候,在页面的dom加载完后就可以做相应的操作。而传统的window.onload事件往往要在页面的资源全部加载完之后(包括窗口,框架,图像等)才触发该事件,
而jquery的$(document).ready(function)事件可以在dom加载之后就被触发,而不必等待到所有资源加载完毕。所有能带来更好的用户体验。
若需要在页面中所有资源下载完成后触发事件,强大的jquery还提供load方法,只要将该方法绑定到相应的对象上就可以了,比如在window对象上绑定。
$(document).ready(function)事件的优点:
a、只要DOM加载完毕就会被触发,极大地提升了用户体验(尤其是对应那些网速较慢的浏览者而言,这点就显得特别重要)
b、可以重复绑定多个事件处理函数,不像window.onload事件,绑定多个事件处理函数,只有最后一个才会生效。
c、提供简写
下面就对$(document).ready(function)事件的三种声明方法进行说明:
语法 1
语法 2
语法 3
2、jquery事件绑定
使用jquery绑定事件一般使用bind方法,bind方法的声明如下:
bind(eventType,[data],fn)
其中第一个参数eventType用于指定待绑定的事件,比如常见的有:click,focus,blur等,可一次性指定多个事件,多个事件之间使用英文逗号分隔;
第二个参数是可选参数,一般很少使用,当声明该参数的时候,将允许我们传递额外的参数给事件处理函数。
第三个参数是事件处理函数。
下面是一个简单的例子:
对一些常见的事件,jquery特别为此提供了一套简写的方法。简写方法和bind方法相类似,实现的效果也一样,只是为了编写方便而已,比如常见的click(fn)、mouseover(fn),mouseout(fn)函数
3、合成事件
jquery中有两个合成事件,即hover()和toggle()方法,下面分别对hover()和toggle()方法进行介绍
hover方法用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的1个函数enter;当光标移出这个元素时,会触发第2个函数leave.
hover方法的语法结构如下:
使用举例如下:
toggle方法用于模拟鼠标连续单击事件,第1次单击元素,触发指定的第1个函数fn1,再次点击同一元素,触发第2个函数fn2;若有更多函数,则依次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
使用示例:
4、事件冒泡
下面是一个冒泡的例子:
使用jquery阻止冒泡方法:event,stopPropagation();
看完了事件冒泡,下面我们就对阻止默认事件进行介绍,在浏览器中有很多默认事件,比如说默认点击右键的时候显示的是浏览器的菜单,但是假如我需要使用自己定义的鼠标右键的菜单,而不使用默认的事件,应该怎么办呢。这个时候你就需要阻止默认事件了。
在jquery中阻止默认事件方法是:event.preventDefault();
jquery不不支持事件捕获,若需要的话,只能使用原生的javascript了
5、事件对象的常见属性
-
type属性,用于获取事件的类型,比如说获取点击事件是click,event.type();
-
event.pageX,event.pageY属性
event.pageX/event.pageY相当于ie中的event.x/event.x,firefox中的event.pageX/event.pageY.jquery对event.pageX/event.pageY进行了封装,使其支持多浏览器
-
event.target属性,获取触发事件的DOM元素(注意不是jquery元素)
-
event.which属性,用于获取在鼠标单击事件中,按下的是哪个键,1
= 鼠标左键, 2 =鼠标中间,
3 = 鼠标右键
-
event.originalEvent属性,指向原始的DOM事件对象
- event.preventDefault()方法,阻止默认事件
6、移除事件
既然已经学习了如何绑定事件,那么下面对学习一下如何移除已绑定的事件吧!
jquery中移除事件的两个方法unbind()方法和one方法
unbind()方法,从每一个匹配的元素中删除绑定的事件,其定义如下:
7、模拟事件
trigger方法使用示例:
分享到:
相关推荐
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件
jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件
下面小编就为大家带来一篇jQuery中事件与动画的总结分享。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery 监听 键盘 事件
jquery阻止事件冒泡jquery阻止事件冒泡jquery阻止事件冒泡
主要介绍了jQuery中事件对象e的事件冒泡用法,需要的朋友可以参考下
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
JQuery绑定事件 Js实现 需要理解的可以下载
JQuery方法事件大全,JQuery方法事件大全,JQuery方法事件大全,JQuery方法事件大全,JQuery方法事件大全,JQuery方法事件大全,JQuery方法事件大全
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...
jquery监听鼠标滚轮事件+js监听滚轮事件, 两个例子,都可以通过! 目前已测试 ie8 火狐,360
jquery绑定click事件传递参数
这是几个关于jquery的一些点击事件的效果, 欢迎多多欣赏
jQuery API 3.3.1 中文手册,jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大...