首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:事件处理

阅读 1012 评论 0
本章的主题是jQuery事件处理,如果你对事件处理不了解,可以看这篇文章《JavaScript学习笔记整理(10):Event事件》。

目录
1、事件处理
2、事件方法
2.1 document对象事件
2.2 浏览器事件方法
2.3 鼠标事件方法
2.4 表单事件方法
2.5 键盘事件方法
3、jQuery Event对象的属性和方法

1、事件处理
(1)事件处理

bind(eventType,function)、bind(eventType,data,function)  为jQuery对象内每一个匹配元素添加一个事件处理函数,支持可选的data参数。

bind(eventType,boolean)

bind(map)

one(eventType,funciton)、one(eventType,data,function)

unbind()、unbind(eventType)、unbind(eventType,boolean)

unbind(Event)


bind()为jQuery对象内每一个匹配元素添加一个事件处理函数,支持可选的data参数。

$('.box').bind('click',function(event){})

所有事件处理函数内的this变量,正常情况下是指向当前DOM元素,它还会给函数传入一个参数,表示当前事件的Event对象。

绑定多个事件:

$('.box').bind('click mousedown',funciton(){});

每个事件名称用空格隔开。

还使用映射对象(键值对形式)在一次bind方法调用中为多个事件绑定处理函数。

var handle = {

  mousedown: function(){},

  mouseup: function(){}

};

$('.box').bind(handle);


bind()方法还可以使用data(任意类型)传入数据

var obj = {name:'tg'};

$('.box').bind('click',obj,funciton(event){

  console.log(event.data.name);  // "tg"

});

在事件处理函数内,event.data就是bind()传入的data数据。

如果最后传入一个boolean参数,它用于指示是否允许元素的默认行为和事件冒泡。如果该值为false,它将阻止元素的默认行为(例如:触发click事件的链接的默认跳转行为,触发submit事件的表单的默认提交行为)和事件的冒泡传递。

注意:bind()方法只会给当前文档中已经存在的匹配元素添加事件处理函数,如果后续动态添加元素,添加元素并不会绑定该事件处理函数,如希望绑定事件对后续添加的元素生效,可使用on()、delegate()等事件函数(优先使用on,下面会讲到)。

我们可以使用unbind()方法来撤销之前绑定在元素上的事件处理函数。如果不提供任何参数调用unbind()方法,则表示撤销所有之前绑定在jQuery对象中所有匹配元素上的事件处理函数。

$('.box').unbind('mousedown');


$('.box').bind('click',function(event){

  $(this).unbind(event);

})

如果像第二种方式传入Event对象,jQuery会自动分析Event对象,撤销正确的事件处理函数。

one()方法和bind()方法的用法一样,不过前者是用来绑定至多执行一次的事件处理函数。

$('.box').one('click',function(){   

  alert(1);   

});

在上面的代码中,给div.box绑定了一个点击的事件处理函数,当你第一次点击时,会弹出1的弹窗,可是第二次再点击时,就不会再响应,什么都没发生。

(2)动态绑定事件处理函数

on(events,selector,data,function)、on(map,selector,data)  为匹配元素绑定事件处理函数

off(events,selector,function)、off(map,selector)  撤销使用on方法绑定的事件处理函数

delegate(selector,eventType,function)、delegate(selector,eventType,data,function)、delegate(selector,map)  使用selector过滤jQuery对象内所有匹配元素,然后绑定事件处理函数

undelegate()、undelegate(selector,eventType)  撤销使用delegate方法绑定且匹配选择器与事件类型的事件处理函数

on()方法也是用来为指定元素的一个或多个事件绑定事件处理函数。

从1.7版本开始,可使用on()方法统一取代之前的bind()、delegate()、live()等事件函数了,推荐使用on()方法。

$('.box').on('click',function(event){});

$('.box').on('click mousedown',function(){});

$('.box').on('click',{color:'red'},function(event){});

$('.box').on('click','p',function(){});  // 为div.box中的所有p元素绑定click事件处理函数


为新添加的元素添加事件
bind()方法只会为页面已存在的元素绑定事件处理函数,可是on()不同,它不仅支持直接在目标元素上绑定事件,还支持在目标元素的父辈元素上委托绑定。

<div class="box">

 <p>123</p><p>34</p>

</div>


$('.box').on('click','p',function(){ alert(1); });


$('.box').append('<p>新添加</p>');

在上面的代码执行后,你会发现click事件处理函数不仅对div.box中原有的两个p有效,对后来append进去的p一样会响应click事件处理函数。

off()方法用来撤销使用on方法绑定的事件处理函数。

(3)手动调用事件处理函数

trigger(eventType)  触发绑定在jQuery对象内匹配元素的特定事件类型(由eventType决定)上的事件处理函数。

trigger(Event)   触发绑定在jQuery对象内匹配元素的特定事件(由Event事件决定)上的事件处理函数。

triggerHandler(eventType)  触发绑定在jQuery对象内第一个匹配元素上的事件处理函数,既不冒泡,也不实施事件的默认行为。

模拟点击

<div class="box">123</div>

<button>模拟点击</button>


$('.box').on('click',function(){

  alert(1);

});

$('button').on('click',function(){

  $('.box').trigger('click');

});


2、事件方法

jQuery提供了很多常用事件绑定事件处理函数。


2.1 document对象事件方法

load(function)  即load事件,在页面中的子元素及资源文件载入完成时触发

ready(function)  在页面中的元素已经处理完成,DOM就绪时触发

unload(function)  即unload事件,当用户离开当前页面时触发


2.2 浏览器事件方法

error(function)  即error事件,在载入外部资源文件出错时触发(如载入图片出错)

resize(function) 即resize事件,当浏览器窗口大小发生变化时触发

scroll(function) 即scroll事件,当用户拖动滚动条时触发


2.3 鼠标事件方法

click(function)  即click事件,在用户点击鼠标按钮时触发

dblclick(function)  即dblclick事件,在用户双击鼠标按钮时触发

focusin(function)  即focusin事件,在元素得到焦点时触发

focusout(function) 即focusout事件,在元素失去焦点时触发

hover(function)、hover(function,function)  即hover事件,在鼠标进入或离开元素时触发,若指定两个参数,进入时会触发第一个函数,离开时会触发第二个函数,否则都会触发第一个。

mousedown(function)  即mousedown事件,当在某元素上按下鼠标时触发

mouseenter(function) 即mouseenter事件,当鼠标进入某元素显示区域时触发

mouseleave(function) 即mouseleave事件,当鼠标离开某元素显示区域时触发

mousemove(function)  即mousemove事件,当鼠标在某元素显示区域内移动时触发

mouseout(function)   即mouseout事件,当鼠标离开某元素显示区域时触发

mouseover(function)  即mouseover事件,当鼠标进入某元素显示区域时触发

mouseup(function)    即mouseup事件,当按下后释放鼠标按钮时触发


mouseenter()与mouseover()、mouseleave() 与mouseup()的区别?

mouseenter()和mouseover()作用一样,但前者不支持冒泡,后者支持。

mouseleave()和mouseup()作用一样,但前者不支持冒泡,后者支持。


2.4 表单事件方法

blur(function)  即blur事件,在元素失去焦点时触发

change(function)  即change事件,在元素的值发生变化时触发

focus(function)  即focus事件,在元素获得焦点时触发

select(function)  即select事件,在用户选中某个可选框时触发

submit(function)  即submit事件,当用户提交表单时触发


2.5 键盘事件方法

keydown(function)  即keydown事件,当用户按下一个键后触发

keypress(function)  即keypress事件,当用户按下一个键并释放后触发

keyup(function)  即keyup事件,当用户释放一个键时触发

keypress事件会在按下键盘按键时触发。它与keydown事件类似,但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress),keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键,请监听keydown事件。


3、jQuery Event对象的属性和方法

Event对象主要英语获取事件的相关信息。

currentTarget   返回正在处理(响应)该事件的元素

data   返回绑定事件时传递的data对象

isDefaultPrevented()   若已经调用过preventDefault()方法,返回true

isImmediatePropagationStopped()  若已经调用过stopImmediatePropation()方法,返回true

originalEvent   返回未经jQuery处理的原始DOM Event对象

pageX、pageY   返回相对于页面左上角的鼠标位置

preventDefault()  用来阻止当前事件的默认行为

relatedTarget  仅对鼠标事件有效,返回该鼠标事件有关的元素

result   返回处理该事件的最后一个事件处理函数的返回值

stopImmediatePropagation()  立即阻止调用当前事件的其他事件处理函数

stopPropagation()  阻止事件冒泡

target  返回触发事件的元素

timeStamp  返回事件发生的时间

type  返回事件类型

which  在键盘和鼠标事件中,返回用户按下的键或鼠标按钮


了解原生的JavaScript事件对理解jQuery事件很有帮助,可以看这篇文章《JavaScript学习笔记整理(10):Event事件》。


关注”全栈技术杂货铺“

全栈技术杂货铺