事件是脚本语言的核心。本文将为大家介绍JQuery支持的一些事件和如何自定义事件
相对于JavaScript的load事件来说,ready事件更优,因为load事件是在一个页面的所有资源,如图片等都下载完成以后发生,而ready事件在DOM下载完成后就发生了。
1)ready函数的位置:如果脚本依赖于CSS属性,则需要在引入css文件之后引入脚本文件,如果脚本依赖于某个资源,则需要用load事件。
2)<body onload="">属性和JQuery的ready,load事件冲突,不要一起使用。
3)不要使用.on("ready",handler)来代替.ready函数。
1)最好不要对同一元素同时添加click和dblclick事件的响应函数,因为对这两个事件的区分会造成一定的困扰
3)hover是mouseenter,mouseleave的组合。
1)键盘事件只发送给当前的焦点元素,因为form常常能够得到焦点,所以我们常把事件绑定到form上,如果想实现快捷键,可以将事件绑定到document上。
2)当输入文本时适合用keypress,当快捷键时适合用keydown,keyup.
1)focusin,focusout和focus,blur的区别在于,当某元素获得或者失去焦点时,其祖先节点也会收到focusin或focusout消息,而不会收到focus或blur消息。
2)对选择框等元素,只要用户做出选择就会触发change事件,而对<textarea>等元素,当元素失去焦点时才有可能触发change事件。
3)select事件只针对<input type="text">和<textarea>的文本选取操作,设置文本的插入点并不会引起select事件,选择网页静态文本也不会引起select事件
resize:浏览器窗口的resize事件,一次resize窗口的动作可能会引发多个resize事件。
scroll:浏览器窗口,可滚动的frame,有scroll属性的元素都能产生scroll事件
有的触发事件的函数如select甚至能产生select行为,调用.select()能选中当前元素里的所有文本。
在事件处理函数中,可以用带参数的函数形式来获取event中的数据,可以用$(this)来获取触发事件的对象。下面看一个简单的例子
在上面的例子中我们用到了事件对象里的属性,下面我们来简单看一下事件对象有哪些属性(部分个人认为重要的属性,不全):
relatedTarget获取相关对象,如对于mouseleave事件,相关对象是获得mouseenter事件
注意:target,currentTarget,relatedTarget和this都是DOM元素,还需要要用$来转化为JQuery能操作的对象,如
对于mousedown和mouseup事件来说,1代表左键,2代表中间键,3代表右键
data:数据传入方式为.click( [eventData ], handler(eventObject) )
event.preventDefault();可以禁止消息的默认响应行为。
event.stopImmediatePropagation();禁止之后的消息处理函数和冒泡过程,不禁止默认响应行为。
event.stopPropagation();不禁止之后的消息处理函数和默认响应行为,但是禁止冒泡过程。
event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()
在某些情况下,你可能需要定制你自己的事件,下面是JQuery官网给的一个简单的示例:
前面,我们看到用on来绑定了一个自定义事件,用trigger来触发了这个自定义事件,其实JQuery为事件的绑定和触发提供了一些更复杂的处理方法,下面我们来学习一下。
JQuery提供了trigger和triggerHandler两种触发事件的函数。
.trigger会为其选择器中所有的元素触发事件,且事件会进行冒泡处理,但是不会引起事件的默认行为。
.triggerHandler只会为其选择器中的第一个元素触发事件,且事件不会进行冒泡处理,也不会引起事件的默认行为。
.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )
其中第二种形式的参数events可以是事件字符串和相应处理函数的数组,个人不喜欢这种形式,觉得看着乱,不如多写几个on呢。
当不提供selector时,为直接绑定模式,当事件传递到被绑定的对象时,就会被触发。
当提供selector时,为代理绑定模式,当事件传递到被绑定的对象时,会检查在冒泡过程中,是否存在满足selector条件的元素,如果有,则会被触发,没有则不会触发。
为什么需要有代理绑定模式呢?有两个对代理绑定模式需求的情景:
a.因为进行事件绑定的时候,被绑定的对象必须已经存在,所以对于那些会动态加入的元素,就可以用代理绑定模式,将事件绑定到其已经存在的最接近的祖先节点上。
b.某父节点下有多个节点需要响应同一个事件。这时使用代理绑定模式能提高效率。
2)off函数和on函数相对,也有两种形式,且支持直接绑定和代理绑定两种模式。
JQuery提供了根据事件名称,空间,选择器,和事件处理函数的组合条件来删除事件绑定的各种便利方式。
3)one函数,消息绑定只被触发一次就会被移除。特别的是在代理绑定模式中,只要事件传递到被绑定的对象,不管是否被触发,都会移除消息绑定。
联系客服