jquery-事件

最新推荐文章于 2024-09-20 20:00:36 发布

原创最新推荐文章于 2024-09-20 20:00:36 发布 · 317 阅读

CC 4.0 BY-SA版权

博客介绍了网页事件相关考点，包含事件列表、使用格式等。具体有focus（获得焦点）、blur（失去焦点）等事件，还提及mouse系列的移入移出事件，如mouseover、mouseout等，以及表单事件submit和resize事件，还探讨了阻止表单提交的方法。

考点

元素失去焦点事件
blur(匿函)

元素获得焦点事件
focus(匿函)
备注
如果让一个对象调用本方法，不传匿函，可让对象获得焦点
例如，标签对象.focus()

鼠标点击事件
click(匿函)

鼠标进入，有冒泡
mouseover(匿函)

鼠标离开，有冒泡
mouseout(匿函)

鼠标进入，无冒泡
mouseenter(匿函)

鼠标离开，无冒泡
mouseleave(匿函)

同时为无冒泡的鼠标进入与鼠标离开定义事件
hover(进入匿函，离开匿函）

DOM加载完成
ready(匿函)

浏览器窗口的大小发生变化
resize(匿函)
一般用于窗口对象，例如：
$(window).resize(匿函)

滚动条的位置发生变化
scroll(匿函)
一般用于窗口对象，例如：
$(window).scroll(匿函)

用户提交表单事件
submit(匿函)
一般用于表单标签对象，例如
表单标签对象.submit(匿函)

函数中的return关键字有哪三个作用
返回函数的执行结果
结束函数的运行
阻止默认的行为  在submit事件匿函中的return false可以阻止表单的提交行为

事件列表

在这里插入图片描述

事件的使用格式

标签对象.事件名称（匿名函数）

在这里插入图片描述

例子

结构

在这里插入图片描述

focus，获得焦点

在这里插入图片描述

获得焦点的事件

通常的用法是

进入一个页面后

让某一个标签得到焦点

这样用户可以直接输入内容

在这里插入图片描述

这样子的效果相当于在标签中输入

在这里插入图片描述

思考，如果两个都在使用focus方法

结果会是怎样的

在这里插入图片描述

blur，失去焦点

在这里插入图片描述

mouse系列的事

移入移出事件

mouseover

mouseout

在这里插入图片描述

移入到con中

在这里插入图片描述

mouseenter
mouseleave

在这里插入图片描述

hover

在这里插入图片描述

hover(匿函移入，匿函移出）

小结

鼠标的移动操作

五个

表单事件

在这里插入图片描述

submit事件

在这里插入图片描述

表单中的submit按钮被点击后，触发submit事件

submit事件一般是表单标签对象有的

阻止表单的提交

利用了return的功能

在这里插入图片描述

resize事件

在这里插入图片描述

resize事件是绑定在窗口上的window上的