您的位置：首页 > Web前端 > JQuery

jQuery学习笔记（3）——事件处理

2016-09-16 18:17 525 查看

jQuery事件处理

jQuery事件处理方法是jQuery的核心函数。

事件处理程序也就是其他GUI处理中的监听器，是指当HTML中发生某些事件（单击、双击、鼠标悬停等）时所调用的方法。

通常会把jQuery代码放在<head>部分的事件处理方法中。

事件模型

首先，要了解浏览器是怎样实现事件模型的。

DOM第0级事件模型

事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。定义这些属性用来处理特定类型的事件。例如，onclick属性用来处理点击事件。

<script>
$(function(){
$('#specialId')[0].onclick = function(event){
alert('something');
}
});
</script>


<img id='specialId' src="img.jpg" onclick="alert('somrthing');"/>


以上两种方式都属于0级事件模型，这种方式缺点就是显示标记与JS定义的行为混合在一起，这种方式不利于代码的阅读和修改。另外，因为属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何一个事件类型，每次只能注册一个事件处理程序。当我们想要在元素被单击时完成两件事，则如下语句无法达到目的。

someElement.onclick = doFirst;
someElement.onclick = doSecond;


DOM第2级事件模型

不同于0级事件模型将函数引用指派到元素属性上，DOM第2级事件处理程序（也称为监听器）是通过一个元素方法而建立的。每个DOM元素都定义名为addEventListener()的方法，用于把事件处理程序附加到元素上。

addEventListener(eventType,listener,useCapture)


eventType是一个字符串，用于标识将要处理的事件类型。一般说来，这个字符串和DOM第0级事件模型里使用的不带on-前缀的事件名称是一致的。例如click，mouseover，keydownd等。

listener是函数的引用（或内联函数），用于在元素上建立指定事件类型的处理程序。

useCapture是一个布尔值，与事件传播有关。

<script>
$(function(){
var ele = $('#sid')[0];
ele.addEventListener('click',function(event){say('1');},false);
ele.addEventListener('click',function(event){say('2');},false);
ele.addEventListener('click',function(event){say('3');},false);
});

function say(text){
$('#div1').append('<div>'+text+'</div>');
}
</script>


应当注意的是，并列建立的多个事件处理程序其触发顺序可能是随机的。

jQuery事件模型

jQuery做为一个库，已经实现了许多常用的功能：

提供建立事件处理程序的统一方法

允许在每个元素上为每个事件类型建立多个处理程序

采用标准的事件类型名称

使Event实例可用作处理程序的参数

对Event实例的最常用的属性进行规范化

为取消时间和阻塞默认操作提供统一方法

绑定事件处理程序

利用jQuery事件模型，用bind()命令可以在DOM元素上建立事件处理程序。

$('img').bind('click',function(event)(alert("Hello world");));


bind的语法：

bind(eventType,data,listener)

在匹配集的所有元素上建立函数，作为指定事件类型的处理程序。

eventType （字符串）为将要建立的处理程序指定事件类型的名称。这个事件类型可以添加命名空间的后缀，后缀和事件名称之间以圆点分隔。

data （对象）调用者提供的数据，作为属性data附加到Event实例，可供事件处理函数使用，可以缺省。

listener （函数）将被建立为事件处理程序的函数。

除了bind，jQuery还提供了one命令，建立处理程序之后一旦执行，处理程序就会被自动删除。

删除事件处理程序

可以利用unload()自主控制一个事件处理程序的生命周期。

unbind的语法：

unbind(eventType,listener)

unbind(event)

从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果没有参数，则删除该元素的所有的事件处理程序。

eventType （字符串）如果提供，则说明只删除为指定的事件类型而建立的监听器。

listener （函数） 如果提供，则标识将要删除的特定监听器。

event （事件） 删除触发Event实例所描述的事件的监听器。

常用的快捷命令：

方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()失去焦点
chan
4000
ge()		元素值发生改变，仅适用于文本域
click()单击
dblclick()双击
delegate()向匹配元素的当前或未来子元素附加一个或多个事件处理器
die()移除所有通过live()函数添加的事件处理程序
error()发生错误
focus()获得焦点
keydown()键盘按下
keypress()长按键盘
keyup()键盘抬起
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()加载完成
mousedown()按下鼠标按钮时（左、右、滚轮都可以），不同于click,当鼠标处于按下状态时进入元素，也会触发
mouseenter()当鼠标指针进入元素时，进入其子元素不会触发
mouseleave()当鼠标指针离开元素时，离开子元素的时候不会触发
mousemove()当鼠标指针在元素中移动时
mouseout()鼠标从被选元素上离开，离开子元素的时候也会触发
mouseover()鼠标进入元素时，进入其子元素也会触发
mouseup()松开鼠标按钮，不同于click,当鼠标处于按下状态时进入元素，并在元素中松开也会触发
one()向匹配元素添加事件处理器，每个元素只能触发一次该处理器
ready()文档就绪事件（当HTML文档就绪可用时）
resize()调整浏览器窗口大小时
scroll()滚动指定元素时
select()textarea或文本类型的input元素被选择时
submit()提交表单时
toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来
unload()用户离开页面时（点击离开页面的链接、在地址栏输入新URL、使用前进后退按钮、关闭浏览器、重新加载页面）
[参考自w3school]

Event实例

为了让事件处理程序能够跨平台跨浏览器可靠工作，jQuery定义了许多安全的Event实例属性。

属性描述
altKey当触发事件时，如果alt键（Mac的option键）被按下，设置为true；否则为false
ctrlKey当触发事件时，如果ctrl键被按下，设置为true；否则为false
data如果有值的话，就在建立处理程序时，作为第二个参数传递给bind()
keyCode对于keyup和keydown事件，返回被按下的键，无论大小写都返回大写版本，可以用shiftKey属性来确定，对于keypress事件，使用which属性
metaKey当触发事件时，如果Meta键（Windows的ctrl或者Mac的command）已被按下，设置为true；否则为false
pageX对于鼠标事件，指定事件的相对于页面原点的水平坐标
pageY对于鼠标事件，指定事件的相对于页面原点的垂直坐标
relatedTarget对于某些鼠标事件，标识触发事件时光标离开或进入的元素
screenX对于鼠标事件，指定事件的相对于屏幕原点的水平坐标
screenY对于鼠标事件，指定事件的相对于屏幕原点的垂直坐标
shiftKey当触发事件时，如果shift键被按下，设置为true；否则为false
target标识在哪个元素上事件被触发
type对于所有事件，指定已触发的事件的类型
which对于键盘事件，指定触发事件的键的数字编码；对于鼠标事件，指定按下的是哪个鼠标键（1左，2中，3右）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery 事件处理
相关文章推荐
新的分享
章节导航