jQuery事件总结

一、 jQuery事件简介
在JavaScript中,事件是当用户在页面上做出某个动作,从而触发事件得到需要的效果。而jQuery就是将这些事件推翻重新编写,同时事件的所实现的效果并没有改变,只是将代码简化变得更加精简,使用变得更加简单方便。
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序是指在页面中发生某些事件时所调用的方法。
二、 事件方法
用户在页面操作所能触发的事件有很多,其中有几种最常见,也是用得非常多的几个事件方法:

  1. 加载事件(ready())
    该方法是当浏览器对象模型载入就绪可以查询以及操纵时一定要执行的方法。
    它在jQuery中的调用方式为:$(document).ready()。
    它就相当于JavaScript中的onload加载事件,不过在JavaScript中同一个页面只能写一个加载事件,而jQuery的ready()方法在同一页面中可以无数次使用该方法,它们会按照先后顺序执行。
    在这里插入图片描述
    当然,该方法也可以使用简写形式,执行的效果没有差别:
    在这里插入图片描述
  2. 鼠标事件
    对于鼠标的事件有很多,例如点击、移动、焦点等等。通过jQuery之后调用和使用都变得更加的简单,下面将列举几点:
    (1) 鼠标单击事件
    该事件通过鼠标在JavaScript中的调用方法为onclick,而在jQuery中的调用方法为click()。
    JavaScript通过赋值形式写方法:
    在这里插入图片描述
    jQuery通过参数形式写方法:
    在这里插入图片描述
    (2) 鼠标移入事件
    该事件通过鼠标在JavaScript中的调用方法为onmouseover,而在jQuery中的调用方法为mouseover()。
    JavaScript通过赋值形式写方法:
    在这里插入图片描述
    jQuery通过参数形式写方法:
    在这里插入图片描述
    与该方法还有一个移入事件:mouseenter(JavaScript:onmouseenter)。该事件与当前方法不同的是当前方法鼠标移入选择元素任何地方都能触发(包括子元素);而该方法鼠标如果移入到元素内的子元素则不能触发,只能是移入选定的元素才能触发。
    (3) 鼠标移出事件
    该事件通过鼠标在JavaScript中的调用方法为onmouseout,而在jQuery中的调用方法为mouseout()。
    JavaScript通过赋值形式写方法:
    在这里插入图片描述
    jQuery通过参数形式写方法:
    在这里插入图片描述
    与该方法还有一个移出事件:mouseleave(JavaScript:onmouseleave)。该事件与当前方法不同的是当前方法鼠标移出选择元素或者子元素都能触发,而该方法鼠标如果移出元素内的子元素则不能触发,只能是移出选定的元素才能触发。
    (4) 鼠标按下事件
    该事件通过鼠标在JavaScript中的调用方法为onmousedown,而在jQuery中的调用方法为mousedown()。
    JavaScript通过赋值形式写方法:
    在这里插入图片描述
    jQuery通过参数形式写方法:
    在这里插入图片描述

(5) 鼠标弹起事件
该事件通过鼠标在JavaScript中的调用方法为onmouseup,而在jQuery中的调用方法为mouseup()。
JavaScript通过赋值形式写方法:
在这里插入图片描述
jQuery通过参数形式写方法:
在这里插入图片描述
3. 表单事件
(1) focus():该方法是元素获取焦点时触发。与之相同事件还有一个focusin(),该方法不同的是可以在父元素上检测子元素的获取焦点情况。
(2) blur():该方法是元素失去焦点时触发。与之相同事件还有一个focusin(),该方法不同的是可以在父元素上检测子元素的失去焦点情况。
(3) change():该方法是当元素发生改变时触发。例如在表单中输入框中的值发生变化鼠标失去焦点后、下拉框选择选项后等等。
(4) celect()
该方法是当元素被选择时触发。表单中输入框被选择到时等等。
(5) submit()
通过该方法来提交表单,在表单本身还会有一个自动提交,可以在该方法体内最后写一个return false来阻止表单自动提交。
在这里插入图片描述
4. 键盘事件
(1) keydown()
调用该方法当键盘按下时则会触发事件。
(2) keyup()
调用该方法当键盘按下弹起时才会触发事件。
这两个事件还可以通过window.event.keyCode==键对应数码的方法具体设置键盘上某一个键的触发事件。比如回车键==13:
在这里插入图片描述
5. 事件的绑定与解绑
(1) on()
通过该方法可以一个元素绑定一个或多个事件同一个函数:
在这里插入图片描述
也可以一个元素绑定一个或多个事件不同函数:
在这里插入图片描述
(2) off()
通过该方法可以将元素所绑定的事件解绑一个或多个:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值