jQuery复习—事件

jQuery事件处理

、就绪处理器事件的绑定方法

1bind(eventType, data, hanlder)

创建一个函数,将其作为在匹配集中的所有元素上指定的时间类型的事件处理器

参数:

eventType: (字符串)为将要创建的处理器指定事件类型的名称。可以使用空格分隔的列表指定多个事件类型

data:(对象)调用者提供的数据,用来附加到event实例的data属性,以便处理器函数所使用。如果省略,则第二个参数为处理器函数

handler: (函数)将要创建为事件处理器的函数。当调用此函数时,会传入Event实例

2one(eventType, data, listener)

创建一个函数,并将其作为匹配集中所有元素指定事件类型的事件处理器。这个处理器一旦执行完毕,就会被自动删除

参数:

eventType: (字符串)为将要创建的处理器指定事件类型的名称。

data: 调用者提供的数据,用来附加到event实例中以便为处理器函数所使用。如果省略,则可以指定第二参数为处理器函数

listener: (函数)将要被创建为一次性事件处理器的函数

3unbind(eventType, listener)

二、预先管理事件处理器

使用bind()和unbind()方法,可以很容易地控制要在DOM中的元素上创建哪些事件处理器。就绪处理器的方便在于可以从头开始在DOM元素上创建处理器。这些DOM元素或者通过页面上的HTML标记创建,或者是在就绪处理器上创建。

但是在页面中我们很经常频繁地引入DOM元素获删除它们,在管理这些动态元素的事件处理器时,就绪处理器就起不到多大作用了。因为这个动态元素在就绪处理器执行时还不存在。

 1、创建“live”事件处理

live()允许预先为那些还不存在的元素创建时间处理器

live(eventType, data, listener)

指定类型的时间元素上发生时,会将传入的监听器作为处理器调用,而无论在调用live方法时这些元素是否已经存在

注意:livelive方法把监听器绑定到了document上了。不把监听器直接绑定在元素上,所以方法内部的this不代表元素。

缺点:只能应用于选择器,不能应用于衍生而来的包装集

$(‘img‘).live(...);    (正确)

$(‘img‘).closest(‘div‘).live(...)   (错误)

2、删除‘live‘事件处理器

die(eventType,listener)

三、其它事件的相关方法

1、起切换作用的监听器

toggle(listener1, listener2, ...)

将传入的函数创建为包装集中所有元素的单击事件处理器的循环列表。处理器将以此在随后的单击事件中被调用

2hover绑定方法

hover(enterHanlder, leaveHandler)

为匹配元素创建mouseenter和mouseleave事件处理器,这些处理器只会在鼠标进入或者离开元素覆盖的区域时触发,而忽略移动到子元素的转变

参数:

enterHandler  (函数)将成为mouseenter处理器的函数

leaveHandler  (函数)将要成为mouseleave处理器的函数

返回值:包装集

四、Event对象

1Event属性


属性


描述


altKey


当alt键已经按下,则设置为ture,否则为false


ctrlKey


当Ctrl键已经按下,则设置为ture,否则为false


currentTarget


冒泡阶段的当前元素。它和事件处理器函数上下文对象是同一个对象


data


如果有值得话,在创建处理器时,将其作为第二个参数传入bind()


metaKey


当触发时间时,当Ctrl键(苹果对应的是comand)键已经按下,则返回true


pageX


对于鼠标事件,指定触发事件时光标相对于页面圆点的水平坐标


pageY


对于鼠标事件,指定触发事件时光标相对于页面圆点的垂直坐标


relatedTarget


对于鼠标事件,找出触发事件时光标离开或者进入的元素


screenX


对于鼠标事件,指定触发事件时光标相对于屏幕原点的水平坐标


screenY


对于鼠标事件,指定触发事件时光标相对于屏幕原点的垂直坐标


shiftkey


当触发事件时,如果shift键已经被按下,则设置为true,否则为false


target


找出触发事件的元素


timestramp


jQuery.Event实例创建时的事件戳,以毫秒为单位


type


为所有的事件指定触发的事件类型(例如click)。如果使用一个时间处理器来处理多个事件,那么这个非常有用


which


对于键盘事件,指定触发事件的数字代码;对于鼠标事件,则指定按下的是哪个按钮(1为左键,2为中键,3为右键)

2、方法


属性


描述


preeventDefault()


阻止任意默认的寓意动作(比如表单提交、链接重定向、复选框状态的改变)等


stopProgation()


停止事假沿着DOM树上进一步传播。当前目标元素上附加的事件不受影响,而且支持自定义事件


stopImmediatePropagation()


停止所有事件沿着DOM树向上进一步传播。包括当前附加元素上的事件


isDefaultPropagation()


如果已经在此实例上调用了preventDefault()方法,则返回true


isPropagationStopped()


如果已经调用了stopProgation()方法,则返回true


isImmediatePropagationStopped()


对于鼠标事件,指定触发事件时光标相对于页面圆点的水平坐标

五、总结


绑定


bind


live


delegate


on


解绑


unbind


die


undelegate


off

此外,还有一种事件绑定方式a.click(function(){});a.change(function(){});,它们的作用于bind一样,仅仅只是简写而已。

bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素,点击它是没有反应的,必须再bind一次才行。

要想不这么麻烦,我们可以使用live。live方法把监听器绑定到了document上了。不把监听器直接绑定在元素上live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document。在监听函数中,我们可以用event.currentTarget来获取到当前捕捉到事件的节点。

例子:

$(‘#myol li‘).live(‘click‘,getHtml);使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。看来live这货还真不错,以后抛弃bind就用它了!可以吗?答案是否定的,而且是大大的否定。因为将监听器绑定到了document上,所以事件的处理得等待层层冒泡,直到冒泡到根节点才开始处理。为此,jQuery官方已宣布在1.7版本开始废弃live,改用其他方式代替。正因为live存在那样的缺点,所以考虑绑定在就近的父级元素上不就好了。

顺应正常逻辑,delegate诞生了。delegate(selector,type,[data],fn)参数多了一个selector,用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上。最后是on方法,on(type,[selector],[data],fn)参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。交换位置的原因不好查证,应该是为了让视觉上更舒服一些吧。例子:$(‘#myolli‘).on(‘click‘,getHtml);可以看到event.currentTarget是li自己,与bind的效果一样。至于传selector进去,就是跟delegate一样的意义了,除了参数顺序不同,其他完全一样。

官方有一个推荐就是尽量使用on,因为其他方法都是内部调用on来完成的,直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了,真正理解它们的区别之后自然而然也就不是难事了。

时间: 04-11

jQuery复习—事件的相关文章

jQuery.load()事件使用方法详解

jQuery.load()是ajax中一种异步加载的事件,我们可以加载整个页面并且也可以带参数加载,下面我来详细介绍jQuery.load()事件用法,希望对初学者有所帮助. .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery 描述: 载入远程 HTML 文件代码并插入至 DOM 中.version added: 1.0.load( url, [ data ], [ c

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替

jQuery绑定事件的四种方式

jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject

jQuery学习-事件之绑定事件(二)

在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { //这里是修正event对象的属性,处理兼容性问题         event = jQuery.event.fix( event ); var i, ret, handleObj, matched, j,             handlerQueue = [],//事件队列             arg

学习jQuery的事件dblclick

Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQuery的事件dblclick. 先在控制器创建一个Action,也就是所说的操作: 有了操作,肯定需要一个视图来支持它: 上面实现的功能,就是用户双击文本框,如果双击到一个空文本框,它会提示用户填写值,如果双击一个已经存有值的文本框,它什么也不做. 演示:

jQuery键盘事件 ctrl+Enter回车键提交表单

分享下jquery键盘事件的一些例子,个人感觉还不错,有空时多多研究. 键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex

JS与Jquery的事件委托机制

传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).

jQuery之事件even

jQuery之事件       W3C:http://www.w3school.com.cn/jquery/jquery_ref_events.asp 一.事件列表 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.dblclick()  当鼠标双击时触发. 5.error() 当javascript出错或img的src属性无效时触发. 6.focus()   当元素获