jQuery-中的事件

【jQuery中的事件】

javascript和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的,虽然传统的javascript能完成这些交互,但事
jQuery增加并扩充了基本事件处理机制。

【加载DOM】
1、执行时机
$(document).ready()方法和window.onload方法相似的功能,但在执行时机方面是有区别的,后者是等到页面中所有的元素完全加载到浏览器在执行,而前者是在DOM再如就绪是就可以执行。另外要注意一点,就是$(document).ready()内注册的事件,只要DOM就绪就会被执行,因此可能此时uansu的关联文件未下载完,例如图片等,要解决这个问题可以使用jQuery的另一个关于页面加载的方法——load()方法。该方法会在元素的onload()事件中绑定一个处理函数。
2、多次使用
就是说window.onload方法只能使用一次,而$(document).ready()方法可以多次使用。

【事件绑定】
可以使用bind()方法来对匹配的元素进行特定是事件绑定,调用格式为:bind(type [.data],fn);
参数说明:第一个参数指的是时间的类型,也可以自定义,第二个参数可选,作为对象属性值传递给事件对象到的额外数据对象。
第三个参数用来绑定的处理函数。
在用于标题链接显示内容的列子中步骤为:
——等待DOM加载完毕;
——找到“标题”所在的元素,绑定click事件;
——找到“内容”元素,如果内容元素是显示则隐藏,隐藏则显示。

改变绑定事件类型步骤:
——等待DOM加载完毕;
——找到“标题”所在的元素,绑定mouseover事件;
——找到“内容”元素,显示“内容”;
——找到“标题”所在的元素,绑定mouseout/事件;
——找到“内容”元素,隐藏“内容”;

【合称事件】
jQuery有两个合成事件:hover()方法和toggle()方法,这两个方法都属于jquery的自定义方法。
hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数,当光标移除元素时会触发第二个函数。
toggle()方法:用于模拟鼠标连续单击事件。
两个方法的执行步骤为:
——等待DOM装载完毕;
——找到“标题”元素,添加toggle()方法,在该方法中定义两个函数,分别表示显示和隐藏;
——在显示函数里,给"标题"添加高亮class;
——在隐藏函数里,移除高亮。

【事件冒泡】
在页面上可以有多个事件,也可以多个元素响应同一个事件,当页面有多个元素,切都绑定了click事件,当单击子元素的click事件时,会从内到外的触发各个元素的click事件,就像冒泡一样,不断向上直至顶端。

事件冒泡引发的问题:事件冒泡会引发意料之外的效果,本来你只想触发一个事件的,结果全部触发了。
解决方案:
(1)事件对象:在程序中使用事件对象只需为函数添加一个参数:
$("element").blind("click",function(event){
   //
});
(2)停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。jQuery中提供了stopPropagation()方法来停止事件冒泡。
(3)阻止默认行为:网页中的元素有自己默认的行为,如:低级连接会跳转,单击提交按钮后表单会提交,有时候需要阻止元素的默认行为,jQuery提供了preventDefault()方法来阻止默认事件。如果想同时对事件对象停止冒泡和阻止默认行为i,可以在事件处理函数中返回false,这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的简写。

例如:在表单事件中可以把   event.preventDefault();改为return false;
(4)事件捕获:事件捕获的过程和事件冒泡的恰好相反,事件捕获是从最顶端往下开始触发。

【事件对象的属性】
jQuery对事件对象的常用属性进行了封装,使得事件处理在各个浏览器上都兼容。
(1)event.type()方法:作用是获取事件的类型。
(2)event.preventDefault()和event.stopPropagation()方法在javascript中对IE是无效的,但是jQUERY对其进行了 封装,使得他得到了兼容。
(3)event.target()方法:作用是获取触发事件的元素,jquery对其进行封装后,避免了各个浏览器不同标准的差异。
(4)event.relatedTarget():mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素是通过event.relatedTarget()来访问的。event.relatedTarget()在mouseover中相当于IE中的event.fromElement,在mouseout中相当于IE中的event.toElement(),jquery对其进行封装后,使他兼容各种浏览器。
(5)event.pageX和event.pageY:该方法作用是获取的光标相对于页面的X坐标和Y坐标。
(6)event.which:该方法作于是在鼠标单击事件中获取到鼠标的左中右键,即在键盘事件中获取键盘的按键,如:
$("a").mousedown(function(e){
alert(e.which)     / /1=鼠标左键;2=鼠标中建;3=鼠标右键。
});
(7)event.metaKey
针对不同浏览器中的<ctrl>按键解释不同,jQuery进行了封装。

【移出事件】
在事件的绑定中,可以多个元素绑定一个事件,亦可以一个元素绑定多个事件,同样也可以移除事件,jQuery提供了unbind()方法
:unbind([type],[data]);
第一个参数是事件类型,第二个参数是将要移除的函数,具体说明如下:
(1)如果没有参数则删除所有绑定的事件;
(2)如果提供了事件类型做参数,则只删除该类型的绑定事件;
(3)如果把在绑定时传递的处理参数作为第二个参数,则只有这个特定的处理函数会被删除。
移除“按钮”<button>元素上注册的事件时,可以只删除其中的一个事件,这个首先得为这些匿名处理函数指定一个变量。
另外,对于只需要触发一次,随后就要立即解除绑定的情况,jQuery提供了一种简写的方式——one()方法,可以为元素绑定事件
处理函数,当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会执行一次。one()方法的结构和bind()方法
的结构相似,用法也相同,使用one()方法为<button>元素绑定单击事件后,只要用户单击1次按钮时,处理函数才会执行,之后单击毫无作用。

【模拟操作】
1、常用模拟
以上例子都是用户必须通过单击按钮,才能触发click事件,但是有时需要模拟用户操作,来达到单击的效果。例如,在用户进入页面后,就触发click事件,而不需要用户去主动单击。
在jQUERY中用trigger()方法完成模拟操作:$("#btn").trigger("click");
这样页面装载完毕后,就会立即输出想要的效果,也可以直接简化写法:$("#btn").click();
2、触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义的事件。
3、传递数据
trigger(type,[data])方法:有两个参数,第一个参数是要触发的事件类型,第二个参数是要传递给事件处理函数的附加数据,以
数组形式。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
4、执行默认操作
trigger()方法触发事件后,会执行浏览器的默认操作。例如表单的focus事件:
$("input").trigger("focus");
会使得<input>元素本生得到焦点。如果只想触发绑定的事件,不想执行浏览器默认操作,可以使用——triggerHandler()方法。
该方法会绑定事件,但不会得到焦点。

到这里jQuery的事件就说完了,还有一些其他的事件,没有具体细则,只有在平时的练习中不断学习和掌握。具体的举例也没说到,有读到的小伙伴就自行琢磨吧!

时间: 2024-10-21 21:39:22

jQuery-中的事件的相关文章

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

Jquery:Jquery中的事件&lt;二&gt;

这几天快忙死了,办了离职还得办入职,完全打乱了我的计划,但是能有一个理想的工作,还是很开心的,以后加把劲,争取把计划再赶上来!不说了,学习!!! 五.事件对象的属性 1.event.type:获取事件的类型,其中event是事件的对象. 2.event.preventDefaule(),在上一个学习笔记中已经有介绍了,该方法是阻止默认的事件事件行为.event.stopPropagation(),该方法的作业是阻止事件的冒泡. 3.event.target,它的作用是获取到触发事件的元素.通过返

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery:详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit