jQuery 事件
本节我们学习 jQuery
中的事件的使用,jQuery
是专门为响应 HTML 页面中的事件而设计的。我们在使用时,需要遵循以下原则:
- 把所有
jQuery
代码置于事件处理函数中。 - 把所有事件处理函数置于文档就绪事件处理器中。
- 把
jQuery
代码置于单独的.js
文件中。 - 如果存在名称冲突,则重命名
jQuery
库。
首先我们要知道什么是事件,页面对不同访问者的响应叫做事件,例如点击某个按钮,选择单选框或复选框,滑动鼠标等,这些都可以称为事件。
jQuery常用事件
在
jQuery
中,大多数 DOM
事件都有一个相应的 jQuery
方法。例如我们前面提到过的点击事件的对应的方法为 click()
方法。click点击事件 当我们点击元素时,会发生
click
点击事件,这需要用到 click()
方法。示例:
jQuery_侠课岛(9xkd.com) - 锐客网
在浏览器中的演示效果:
文章图片
dblclick双击事件 当我们双击元素时,会触发
dblclick
双击事件。触发双击事件需要用到 dblclick()
方法。注意
dblclick
事件也会产生 click
事件,所有如果这两个事件都被应用于同一个元素,则会产生问题。示例: 例如双击
p
元素并隐藏这个元素:
jQuery_侠课岛(9xkd.com) - 锐客网 双击隐藏此元素
在浏览器的演示效果:
文章图片
鼠标事件
jQuery
的鼠标有四个相关的事件,包括鼠标指针进入、离开、按下、释放:- 当鼠标指针穿过(进入)被选元素时,可以通过
mouseenter()
方法触发mouseenter
事件。 - 当鼠标指针离开 HTML 元素时,可以通过
mouseleave()
方法触发mouseleave
事件。 - 当鼠标指针移动到元素上方,并按下鼠标按键时,可以通过
mousedown()
方法触发mousedown
事件。 - 当在元素上松开鼠标按钮时,可以通过
mouseup()
方法触发mouseup
事件。
jQuery_侠课岛(9xkd.com) - 锐客网 mouseenter事件,鼠标指针移动到元素上,弹出弹出层
【jQuery 事件】mouseleave事件,鼠标指针离开元素上,弹出弹出层
mousedown事件,在元素上按下鼠标,弹出弹出层
mouseup事件,在元素上松开鼠标,弹出弹出层
hover()方法
hover()
方法用于在鼠标指针悬停在被选元素上时要运行的两个函数。即 mouseenter()
和 mouseleave()
方法。示例:
hover()
中第一个函数在鼠标进入 HTML 元素时执行,第二个函数在鼠标离开 HTML 元素时执行:$(function(){
$("p").hover(
function(){
console.log("鼠标进入HTML元素,执行第一个函数!");
},
function(){
console.log("鼠标离开HTML元素,执行第二个函数!");
}
);
});
上述代码相当于:
$("p").mouseenter(function(){
console.log("鼠标进入HTML元素,执行第一个函数!");
}).mouseleave(function(){
console.log("鼠标离开HTML元素,执行第二个函数!");
});
我们可以在浏览器中看一下演示效果:
文章图片
focus()和blur()方法 当表单元素获得焦点时,也可以说是通过鼠标点击选中元素或通过
tab
键定位到元素时,会发生 focus
事件。可以通过 focus()
方法来触发 focus
事件。focus()
方法通常与 blur()
方法一起使用,当表单元素失去焦点时发生 blur
事件。 blur
事件是通过 blur()
来触发的。示例:
jQuery_侠课岛(9xkd.com) - 锐客网 用户名:
在浏览器中的演示效果:
文章图片
推荐阅读
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 事件代理
- 事件处理程序
- 全过程工程咨询——时间管理(12)
- Android事件传递源码分析
- 66万奔驰漏油事件看宝宝无理取闹
- 「我的2017」——2017|「我的2017」——2017,大事件盘点
- jQuery插件
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- 心理工作要不断的评估现实事件对来访者心理造成的影响是什么