JQuery知识快览之二—事件

时间 2019-11-11

原文原文链接

事件是脚本语言的核心。本文将为你们介绍JQuery支持的一些事件和如何自定义事件css

JQuery内置事件

1.Document加载事件html

JQuery提供了ready，load，unload三个Document加载事件。load和unload事件从1.8版开始就不同意使用了，ready能够说是咱们用得最多的一个事件。这是一个最特别的事件，全部的JQuery语句的执行都始于ready事件。通常都在这个事件的响应函数里绑定其余的响应函数，执行代码等。jquery

相对于JavaScript的load事件来讲，ready事件更优，由于load事件是在一个页面的全部资源，如图片等都下载完成之后发生，而ready事件在DOM下载完成后就发生了。数组

它有多种使用形式：浏览器

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

在用ready事件时须要注意以下四点app

1)ready函数的位置:若是脚本依赖于CSS属性，则须要在引入css文件以后引入脚本文件，若是脚本依赖于某个资源，则须要用load事件。函数

2)<body onload="">属性和JQuery的ready，load事件冲突，不要一块儿使用。学习

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

4)$和其余库中定义冲突时，可用以下形式写代码:spa

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>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>click me</li>
<li>click me</li>
</ul>
</div>
<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>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</a></li>
</ul>
</div>
<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>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</li>
</ul>
</div>
<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函数，消息绑定只被触发一次就会被移除。特别的是在代理绑定模式中，只要事件传递到被绑定的对象，不论是否被触发，都会移除消息绑定。