javascript代码实例教程-JQuery知识快览之二―事件

发布时间:2019-02-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery知识快览之二―事件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 事件是脚本语言的核心。本文将为大家介绍jquery支持的一些事件和如何自定义事件

 

JQuery内置事件

1.Document加载事件

 

JQuery提供了ready,load,unload三个Document加载事件。load和unload事件从1.8版开始就不赞成使用了,ready可以说是我们用得最多的一个事件。这是一个最特别的事件,所有的JQuery语句的执行都始于ready事件。一般都在这个事件的响应函数里绑定其他的响应函数,执行代码等。

 

相对于JavaScript的load事件来说,ready事件更优,因为load事件是在一个页面的所有资,如图片等都下载完成以后发生,而ready事件在DOM下载完成后就发生了。

 

它有多种使用形式:

 

$( document ).ready( handler )

$().ready( handler ) (this is not recommended)

$( handler )

在用ready事件时需要注意如下四点

 

1)ready函数的位置:如果脚本依赖于CSS属性,则需要在引入css文件之后引入脚本文件,如果脚本依赖于某个资源,则需要用load事件。

 

2)<body onload="">属性和JQuery的ready,load事件冲突,不要一起使用。

 

3)不要使用.on("ready",handler)来代替.ready函数。

 

4)$和其他库中定义冲突时,可用如下形式写代码:

 

jQuery( document ).ready(function( $ ) {

// Code using $ as usual goes here.

});

 

 

2.鼠标事件

 

click

 

dblclick

 

mousedown

 

mouseup

 

mouSEMove

 

mouseenter

 

mouseleave

 

mouseover

 

mouseout

 

hover

 

注意事项

 

1)最好不要对同一元素同时添加click和dblclick事件的响应函数,因为对这两个事件的区分会造成一定的困扰

 

2)mouseenter,mouseleave和mouseover,mouseout的不同在于,当鼠标移动到某元素上或离开某元素时,其祖先节点也会接收到mouseover或mouseout事件,但是不会接收到mouseenter或mouseleave事件,所以推荐使用Mouseenter和mouseleave。

 

3)hover是mouseenter,mouseleave的组合。

 

 

 

3.键盘事件

 

keydown

 

keyup

 

keyPress

 

注意事项:

 

1)键盘事件只发送给当前的焦点元素,因为form常常能够得到焦点,所以我们常把事件绑定到form上,如果想实现快捷键,可以将事件绑定到document上。

 

2)当输入文本时适合用keyPRess,当快捷键时适合用keydown,keyup.

 

 

 

4.表单事件

 

focus

 

blur

 

focusin

 

focusout

 

change

 

select

 

submIT

 

注意事项:

 

1)focusin,focusout和focus,blur的区别在于,当某元素获得或者失去焦点时,其祖先节点也会收到focusin或focusout消息,而不会收到focus或blur消息。

 

2)对选择框等元素,只要用户做出选择就会触发change事件,而对<textarea>等元素,当元素失去焦点时才有可能触发change事件。

 

3)select事件只针对<input tyPE="text">和<textarea>的文本选取操作,设置文本的插入点并不会引起select事件,选择网页静态文本也不会引起select事件

 

 

 

5.浏览器事件

 

reSize:浏览器窗口的resize事件,一次resize窗口的动作可能会引发多个resize事件。

 

scroll:浏览器窗口,可滚动的frame,有scroll属性的元素都能产生scroll事件

 

error:1.8版开始不赞成使用了

 

 

 

JQuery事件函数

JQuery针对每个事件,都至少定义了两个版本的事件函数,以click事件为例,JQuery定义了两种函数,都名为click,只是参数不同,一个函数用函数做参数,用于进行绑定事件处理函数,另一个函数不需要参数,用于触发事件。如

 

#("button").click(function(){

//do things when button clicked.

});

$("button").click();//trigger click event

有的触发事件的函数如select甚至能产生select行为,调用.select()能选中当前元素里的所有文本。

 

在事件处理函数中,可以用带参数的函数形式来获取event中的数据,可以用$(this)来获取触发事件的对象。下面看一个简单的例子

 

 

<!doctype htML>

<html lang="en">

<head>

<;meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li>click me</li>

<li>click me</li>

</ul>

</p>

<script>

$("ul li").click(function(event){

$(this).html("Mouse clicked at pos:"+event.pageX+","+event.pageY);

});

</script>

</body>

</html>

 

 

 

JQuery事件对象

在上面的例子中我们用到了事件对象里的属性,下面我们来简单看一下事件对象有哪些属性(部分个人认为重要的属性,不全):

 

target

 

currentTarget(不推荐)

 

注意:this和currentTarget都是绑定事件的对象,对于delegated events,则是selector匹配的元素。而target是真正触发消息的对象。target为currentTarget对象或其子孙节点。

 

relatedTarget获取相关对象,如对于mouseleave事件,相关对象是获得mouseenter事件

 

注意:target,currentTarget,relatedTarget和this都是DOM元素,还需要要用$来转化为JQuery能操作的对象,如

 

$(event.currentTarget).css("background-color","red");

pageX

 

pageY

 

which

 

对于mousedown和mouseup事件来说,1代表左键,2代表中间键,3代表右键

 

对于键盘事件来说,则是对应的ASCII码

 

altKey

 

ctrlKey

 

shiftKey

 

metaKey

 

type

 

data:数据传入方式为.click( [eventData ], handler(eventObject) )

 

 

 

JQuery的事件执行流程

一个事件触发后,JQuery将先查看触发该事件的元素是否有绑定对应的消息处理函数,如果有则按消息处理函数的绑定顺序依次执行,当该元素的事件都处理完了后,如果该事件是冒泡事件,则依次向其父节点进行冒泡的过程,继续检查父节点,父节点的父节点。。。最后再执行该消息的默认响应行为。

 

通过对事件对象执行一定的操作,能改变这个流程。

 

event.preventDefault();可以禁止消息的默认响应行为。

 

event.stopImmediatePropagation();禁止之后的消息处理函数和冒泡过程,不禁止默认响应行为。

 

event.stopPropagation();不禁止之后的消息处理函数和默认响应行为,但是禁止冒泡过程。

 

在函数里return false;效果和event.preventDefault()+event.stopPropagation()一样。甚至你可以直接用false来代替一个return false的函数,如下:

 

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li><a href="baidu.COM">link</a></li>

</ul>

</p>

<script>

$("li").click(false);

</script>

</body>

</html>

 

 

 

下面三个函数分别判断上面三个函数是否已经执行。

 

event.isDefaultPrevented()

event.isImmediatePropagationStopped()

event.isPropagationStopped()

 

 

 

自定义事件

在某些情况下,你可能需要定制你自己的事件,下面是JQuery官网给的一个简单的示例:

 

$( "#foo" ).on( "custom", function( event, param1, param2 ) {

alert( param1 + "/n" + param2 );

});

$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

如果不想用自定义数据,可简单的写成这样

 

$( "#foo" ).on( "custom", function() {

alert("custom event happened");

});

$( "#foo").trigger( "custom");

 

 

事件进阶

前面,我们看到用On来绑定了一个自定义事件,用trigger来触发了这个自定义事件,其实JQuery为事件的绑定和触发提供了一些更复杂的处理方法,下面我们来学习一下。

 

 1.事件的触发

 

JQuery提供了trigger和triggerHandler两种触发事件的函数。

 

.trigger会为其选择器中所有的元素触发事件,且事件会进行冒泡处理,但是不会引起事件的默认行为。

 

.triggerHandler只会为其选择器中的第一个元素触发事件,且事件不会进行冒泡处理,也不会引起事件的默认行为。

 

另外两个函数的返回值也是不一样的。

 

2.事件处理函数的绑定和解绑定

 

1.7版新增了on和off两个函数来进行事件处理函数的绑定和解绑定,这两个函数基本代替了原有的bind,unbind和delegate,undelegate的功能,所以现在JQuery官方推荐用on和off来替代另两组函数。

 

1)on有两种形式

 

.on( events [, selector ] [, data ], handler(eventObject) )

.on( events [, selector ] [, data ] )

 

其中第二种形式的参数events可以是事件字符串和相应处理函数的数组,个人不喜欢这种形式,觉得看着乱,不如多写几个on呢。

 

当不提供selector时,为直接绑定模式,当事件传递到被绑定的对象时,就会被触发。

 

当提供selector时,为代理绑定模式,当事件传递到被绑定的对象时,会检查在冒泡过程中,是否存在满足selector条件的元素,如果有,则会被触发,没有则不会触发。

 

为什么需要有代理绑定模式呢?有两个对代理绑定模式需求的情景:

 

a.因为进行事件绑定的时候,被绑定的对象必须已经存在,所以对于那些会动态加入的元素,就可以用代理绑定模式,将事件绑定到其已经存在的最接近的祖先节点上。

 

b.某父节点下有多个节点需要响应同一个事件。这时使用代理绑定模式能提高效率。

 

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li><a href="baidu.com">link</li>

</ul>

</p>

<script>

$("ul").on("click",$("a"),function(){

  alert("a is clicked");

});

$("li").click(function(){

  alert("li is clicked");

});

 

</script>

</body>

</html>

 

 

 

2)off函数和on函数相对,也有两种形式,且支持直接绑定和代理绑定两种模式。

 

JQuery提供了根据事件名称,空间,选择器,和事件处理函数的组合条件来删除事件绑定的各种便利方式。

 

 

 

3)one函数,消息绑定只被触发一次就会被移除。特别的是在代理绑定模式中,只要事件传递到被绑定的对象,不管是否被触发,都会移除消息绑定。

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery知识快览之二―事件全部内容,希望文章能够帮你解决javascript代码实例教程-JQuery知识快览之二―事件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。