jQuery 键盘事件
jQuery 键盘事件
开发工具与关键技术：Visual Studio 前端
作者：盘子
撰写时间：2019年4月25日
jQuery 事件包含页面载入事件、键盘事件、鼠标事件、表单事件四大部分。下面用课堂所学页面登录知识来学习、总结事件知识。键盘事件：实现快捷键登录--enter回车键登录，代码、实现的效果以及知识总结如下：
截取的 jQuery 代码:
|
$(document).ready(function () { if (window.top.location.href != window.location.href) { window.top.location.href = window.location.href; } }); var layer; //快捷登录enter回车键登录 $("body").keyup(function (e) { //var theEvent = e || window.event; //var code = theEvent.keyCode || theEvent.which || theEvent.charCode; if (e.keyCode == 13) { $("#btnSubmit").click(); } }); |
下面是登录页面截图，最后输入正确的验证码，按enter键登录，页面加载，登录成功进入主页面。（图片从左到右）
页面载入事件 ：
ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
要注意的不同点：window.onload 事件在同一个页面只能使用一次。$(document).ready()事件在同一个页面中可以无限次地使用。并且其中注册的函数会按照（代码中的）先后顺序依次执行。
参数说明：fn 要在DOM就绪时执行的函数 语法：
$(document).ready()的简写形式为：$(function () { });
jQuery键盘事件：
鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听
keydown()事件：当键盘或按钮被按下时，发生 keydown 事件。（注：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生）
参数说明：
data:keydown([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的keydown事件中绑定的处理函数。
Keyup()事件：当按钮被松开时（是在键盘松手就会触发），发生 keyup 事件。它发生在当前获得焦点的元素上。
keypress()事件：当键盘或按钮被按下时，发生 keypress 事件。
当浏览器捕获键盘输入时，还提供了一个keypress的响应，这个跟keydown是非常相似
它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。（注：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。）
keypress()事件与keydown和keyup的主要区别：
只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符
keypress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
jQuery鼠标事件：
click() 单击事件 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
dbclick() 双击事件当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。
mousedown 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup当在元素上放松鼠标按钮时，会发生 mouseup 事件。
mouseenter当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mouseleave 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
hover事件 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数说明：over,out：
over:鼠标移到元素上要触发的函数
out: 当鼠标移到元素上或移出元素时触发执行的事件函数
focusin()事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout()事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
jQuery表单事件：
change()事件: 当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change() 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
input元素——监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素——对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素——多行文本输入框，当有改变时，失去焦点后触发change事件
<input>元素，<textarea>和<select>元素的值发生改变时，可以通过change事件去监听这些改变的动作
select()事件 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
select()事件只能用于<input>元素与<textarea>元素
submit()事件 当提交表单时，会发生 submit 事件。该事件只适用于表单元素
注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
unload()事件：在当用户离开页面时，会发生 unload 事件。
具体来说，当发生以下情况时，会发出 unload 事件：
- 点击某个离开页面的链接
2、在地址栏中键入了新的 URL
3、使用前进或后退按钮
4、关闭浏览器
5、重新加载页面
scroll()事件：当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
resize()：当调整浏览器窗口的大小时，发生 resize 事件。