摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。
目录第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 click与dbclick事件
用交互操作中,最简单直接就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用户是类似,下面以click()事件为例
使用上非常简单:
方法一:$ele.click()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
点击触发$("ele").click(function(){ alert("触发指定事件") }) $("#text").click(function(){ $("ele").click() //手动指定触发事件 });方法二:$ele.click( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数,这样可以针对事件的反馈做很多操作了,方法中的this是指向了绑定事件的元素
点击触发$("#text").click(function() { //this指向 div元素 });方法三:$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
点击触发$("#text").click(11111,function(e) { //this指向 div元素 //e.date => 11111 传递数据 });dbclick()的用法和click()的用法是类似的,可以参考以上click()的用法。
dbclick与click事件不同的是:
click事件触发需要以下几点:
click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发
PS:mousedown和mouseup下一节会讲到
dblclick事件触发需要以下几点:**
dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发
鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次点击,点击间隔时间,是系统而定。
鼠标指针在元素里面时再次释放。
注意:在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的,一些浏览器在dblclick之前接受两个 click 事件 ,而和其它浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
mousedown与mouseup事件用交互操作中,最简单直接就是点击操作,因此jQuery提供了一个mousedown的快捷方法可以监听用户点击的操作,与其对应的还有一个方法mouseup快捷方法可以监听用户点击的操作。两种方法用法类似,一下以mousedown()为例
使用上非常简单:
方法一:$ele.mousedown()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,可能一般用的比较少
点击触发$("ele").mousedown(function(){ alert("触发指定事件") }) $("#text").mousedown(function(){ $("ele").mousedown() //手动指定触发事件 });方法二:$ele.mousedown( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
点击触发$("#text").mousedown(function() { //this指向 div元素 });方法三:$ele.mousedown( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
点击触发$("#text").mousedown(11111,function(e) { //this指向 div元素 //e.date => 11111 传递数据 });mousedown事件触发需要以下几点:
mousedown强调是按下触发
如果在一个元素按住了鼠标不放,并且拖动鼠标离开这个元素,并释放鼠标键,这仍然是算作mousedown事件
任何鼠标按钮被按下时都能触发mousedown事件
用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
mouseup事件触发需要以下几点:**
mouseup强调是松手触发,与mousedown是相反的
mouseup与mousedown组合起来就是click事件
如果用户在一个元素上按下鼠标按键,并且拖动鼠标离开这个元素,然后释放鼠标键,这仍然是算作mouseup事件
任何鼠标按钮松手时都能触发mouseup事件
用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
另外需要注意的是:
click与mousedown的区别:**
click事件其实是由mousedown于mouseup 2个动作构成,所以点击的动作只有在松手后才触发
mousemove事件用交互操作中,经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件,jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作
使用上非常简单:
方法一:$ele.mousemove()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
点击触发$("ele").mousemove(function(){ alert("触发指定事件") }) $("#text").click(function(){ $("ele").mousemove() //指定触发事件 });方法二:$ele.mousemove( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
滑动触发$("#text").mousemove(function() { //this指向 div元素 });方法三:$ele.mousemove( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
点击触发$("#text").mousemove(11111,function(e) { //this指向 div元素 //e.date => 11111 传递数据 });mousemove事件触发需要以下几点:
mousemove事件是当鼠标指针移动时触发的,即使是一个像素
如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题
mouseenter与mouseleave事件用交互操作中,经常需要知道用户操作鼠标是否有移到元素内部或是元素外部,因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作
使用上非常简单,三种参数传递方式与mouseover和mouseout是一模一样的,所以这里不再重复,主要讲讲区别,下面以mouseenter为例:
mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用,jQuery的模拟这一事件,以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
mouseenter事件和mouseover的区别
关键点就是:冒泡的方式处理问题简单的例子:
mouseover为例:
鼠标离开此区域触发mouseleave事件
如果在p元素与div元素都绑定mouseover事件,鼠标在离开p元素,但是没有离开div元素的时候,触发的结果:
p元素响应事件
div元素响应事件
这里的问题是div为什么会被触发? 原因就是事件冒泡的问题,p元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果有全触发了
所以在这种情况下面,jQuery推荐我们使用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发这就是最本质的区别.
hover事件学了mouseover、mouseout、mouseenter、mouseleave事件,也理解了四个事件的相同点与不同点,现在可以用来给元素做一个简单的切换效果
在元素上移进移出切换其换色,一般通过2个事件配合就可以达到,这里用mouseenter与mouseleave,这样可以避免冒泡问题
$(ele).mouseenter(function(){ $(this).css("background", "#bbffaa"); }) $(ele).mouseleave(function(){ $(this).css("background", "red"); })这样目的是达到了,代码稍微有点多,对于这样的简单逻辑jQuery直接提供了一个hover方法,可以便捷处理
只需要在hover方法中传递2个回调函数就可以了,不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数
focusin事件当一个元素,或者其内部任何一个元素获得焦点的时候,例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件
使用上非常简单:
方法一:$ele.focusin()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,一般用的比较少
点击触发$("ele").focusin(function(){ alert("触发指定事件") }) $("#text").mouseup(function(){ $("ele").focusin() //指定触发事件 });
方法二:$ele.focusin( handler )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
点击触发$("#text").focusin(function() { //this指向 div元素 });
方法三:$ele.focusin( [eventData ], handler )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
点击触发$("#text").focusin(11111,function(e) { //this指向 div元素 //e.date => 11111 传递数据 }); blur与foucus事件在之前2我们了解了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件
它们之间的本质区别:
是否支持冒泡处理
举个简单的例子
其中input元素可以触发focus()事件
div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。
focus()在元素本身产生,focusin()在元素包含的元素中产生blur与focusout也亦是如此
change事件元素,
input元素
监听value值的变化,当有改变时,失去焦点后触发change事件select元素
对于下拉选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发textarea元素
多行文本输入框,当用户用鼠标点击时,该事件立即触发change事件很简单,无非就是注意下触发的先后行为
//示例 //监听input值的改变 $(".target1").change(function(e) { $("#result").html(e.target.value) }); //监听select: $(".target2").change(function(e) { $("#result").html(e.target.value) }) //监听textarea: $(".target3").change(function(e) { $("#result").html(e.target.value) })select事件当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。select事件只能用于元素与使用上非常简单:
方法一:.select()
触发元素的select事件:
$("input").select();
方法二:$ele.select( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
$("#text").select(function() { //响应文字选中回调 //this指向 input元素 });
方法三:$ele.select( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
$("#text").select(11111,function(e) {//响应文字选中回调 //this指向 div元素 //e.date => 11111 传递数据 });submit事件提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作
使用上非常简单,与基本事件参数处理保持一致
方法一:$ele.submit()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
点击触发$("ele").submit(function(){ alert("触发指定事件") }) $("#text").click(function(){ $("ele").submit() //指定触发事件 });方法二:$ele.submit( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
$("#target").submit(function() { //绑定提交表单触发 //this指向 from元素 });方法三:$ele.submit( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
$("#target").submit(11111,function(data) { //绑定提交表单触发 //data => 1111 //传递的data数据 });
通过在
相关文章
JQuery基础修炼-事件篇
摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。 目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 cli...
JQuery基础修炼-样式篇
摘要:具有相同的父元素,并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度,是大于零。元素的或被认为是可见的,因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...
JQuery基础修炼-样式篇
摘要:具有相同的父元素,并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度,是大于零。元素的或被认为是可见的,因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...
2019 Java 全栈工程师进阶路线图,一定要收藏
摘要:结合我自己的经验,我整理了一份全栈工程师进阶路线图,给大家参考。乾坤大挪移第一层第一层心法,主要都是基本语法,程序设计入门,悟性高者十天半月可成,差一点的到个月也说不准。 技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点松哥是深有体会的。 我刚开始学习 Java 那会,最大的问题就是不知道该学什么,以及学习的顺序,我相信这也是很多初学者经常面临的问题。我...
Laravel核心解读--完结篇
摘要:过去一年时间写了多篇文章来探讨了我认为的框架最核心部分的设计思路代码实现。为了大家阅读方便,我把这些源码学习的文章汇总到这里。数据库算法和数据结构这些都是编程的内功,只有内功深厚了才能解决遇到的复杂问题。 过去一年时间写了20多篇文章来探讨了我认为的Larave框架最核心部分的设计思路、代码实现。通过更新文章自己在软件设计、文字表达方面都有所提高,在刚开始决定写Laravel源码分析地...
发表评论
0条评论
hikui
男|高级讲师
TA的文章
阅读更多
[笔记]springboot集成Quartz简单使用+数据库
阅读 2624·2021-11-23 09:51
哪个品牌的云数据库比较好?重点关注这三个方面!
阅读 1612·2021-11-22 13:54
基于Python+MySQL的飞机大战游戏包含用户登录
阅读 2685·2021-11-18 10:02
10g.biz,圣何塞高防服务器85折促销,$84/月,不限流量,40G DDOS,E3-1230/
阅读 907·2021-08-16 10:57
HaloCloud:日本软银线路,100M、200M、500M带宽,可看奈飞,香港Azure1000
阅读 3502·2021-08-03 14:03
前端每日实战:147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效
阅读 1793·2019-08-30 15:54
vue组件封装及父子组件传值,事件处理
阅读 3486·2019-08-23 14:39
SinF的Electron系列之三---electron-packager加载第三方资源
阅读 562·2019-08-23 14:26
<阅读需要支付1元查看