JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。

具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类的)。

一:键盘事件有:

1.keydown  当键盘或按钮被按下时,发生 keydown 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

2.keypress  当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

3.keyup  当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

二:鼠标事件:

1.mousedown  当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

2.mouseenter  当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

3.mouseleave  当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

4.mousemove  当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标

5.mouseout 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。

6.mouseover  当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。请看下面例子的演示。

7.mouseup  当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

8.click 当鼠标点击并松开的时候会触发每一个匹配元素的click事件。

9.dblclick  当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。

三:input事件

1.获得焦点focus :当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。

2.失去焦点blur :当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

3.内容改变change :当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

4.选中内容select :当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

四:其他事件:

1.scroll 当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

2.resize  当调整浏览器窗口的大小时,发生 resize 事件。

基本的用法就这些,现在我用click举一个例子给大家介绍一下,这些方法是怎么实现和调用的。

<html>
<head>
<meta charset="UTF-8">
<title>on中的事件处理函数</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<body>
<input type="button" value="按钮" id="button_id">
  <script>
		$("#button_id").on('click', function(){
			alert("你点击了一下");
		});
  </script>
</body>
</html>

想要调用其他函数的时候,只要将click换成相应的函数就可以实现其功能了,是不是特别简单啊!

如果想要再继续深入学习每个函数的具体用法,可以参考JQuery中的官方API。里面介绍都很详细,我这里就不多介绍了。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LeoXu的博客

ActionScript的事件处理机制处理机制

ActionScript和JavaScript的事件处理机制处理机制几乎完全相同,所不同的主要是ActionScript的事件处理机制还提供了一个 事...

382
来自专栏猿人谷

memcpy的函数

网新恒天2014校园招聘笔试编程题 已知memcpy的函数为: void* memcpy(void *dest , const void* src , s...

1958
来自专栏Python入门

python是如何进行内存管理的

python内部使用引用计数,来保持追踪内存中的对象,Python内部记录了对象有多少个引用,即引用计数,当对象被创建时就创建了一个引用计数,当对象不再需要时,...

541
来自专栏杂七杂八

urllib模拟浏览器登录

使用build_opener()修改报头 由于urlopen()不支持一些HTTP的高级功能,所以,我们如果要修改报头,可以使用urllib.request.b...

3145
来自专栏DT乱“码”

jQuery封装的AJAX使用

jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起A...

2046
来自专栏木木玲

“类加载机制”详解

1261
来自专栏lgp20151222

$.ajax()方法参数详解

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器...

521
来自专栏Java Edge

类加载的过程1 加载2 验证3 准备4 解析5 初始化

27912
来自专栏我和PYTHON有个约会

24. 企业级开发基础5:面向对象特征(封装)

在我们程序开发过程中,定义好类型之后就可以通过类型来创建对象 如:我们定义一个中华人民共和国公民的类型

721
来自专栏恰同学骚年

你必须知道的指针基础-4.sizeof计算数组长度与strcpy的安全性问题

  如果在作用域内,变量以数组形式声明,则可以使用sizeof求数组大小,下面一段代码展示了如何使用sizeof:

552

扫码关注云+社区