jQuery事件总结
开发工具与关键技术:vs2015 C#
作者:肖佳鑫
撰写时间:2020年9月 1日
页面载入 :ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
注意: 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
参数说明:fn 要在DOM就绪时执行的函数
在DOM加载完成时运行的代码,可以这样写:
jQuery 代码:
$(document).ready(function(){
在这里写你的代码...
});
使用
$(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。
jQuery 代码:
$(function($) {
你可以在这里继续使用$作为别名...
});
jQuery鼠标事件
jQuery鼠标事件列表:
click 单击事件 dbclick 双击事件
mousedown 鼠标按下事件 mouseup鼠标弹起事件
mouseenter 鼠标进入事件 mouseleave 鼠标离开事件
jQuery鼠标事件之click与dbclick事件
click([[data], fn])
参数说明:fn 在每一个匹配元素的click事件中绑定的处理函数。
data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
dblclick([[data],fn]) 参数说明同上
第一个按钮的点击事件
$(“button:eq(0)”).click(function () {
alert("jQuery鼠标事件之click单击事件");
请写出为选中第一个按钮的方法,并为他添加点击事件
例如:$("button").eq(0).click(function(){})
$(“button:first”).click(function () { alert(“12”)
});
$("button").first().click(function
() { });
});
$("button:eq(0)").click(2222,
function (e) {
alert(e.data); 警告框弹出2222
});
jQuery鼠标事件之focusin事件 与
focusout事件
Query表单事件之focus与blur[blɚ] 事件
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况
$("#demo").focusin(function () {
$(this).addClass("changeColor");
});
$("#demo").focusout(function () {
$(this).removeClass("changeColor");
});
表单事件
jQuery中的focus()获取焦点事件与blur()失去焦点事件(鼠标事件)
1. focus() 事件
当元素获得焦点时,触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数
2. blur() 事件
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
$(".wrap input").focus(function () {
console.log("input已经获取到了焦点");
});
$(".wrap input").blur(function () {
console.log("input已经失去了焦点");
});
jQuery中的focusin()事件与focusout()事件
focusin() 事件
当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout() 事件
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况
jQuery中的表单事件 change()事件
元素,和元素的值都是可以发生改变的,开发者可以通过change事件去监听这些改变的动作
input元素
监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素
对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发
textarea元素
多行文本输入框,当有改变时,失去焦点后触发change事件
jQuery表单事件中的 submit()事件
提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。
样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作
例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作
使用上非常简单,与基本事件参数处理保持一致
这里需要特别注意:
form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为
,jQuery中可以直接在函数中最后结尾return false即可jQuery键盘事件 keydown()与keyup()事件
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,
jQuery分别提供了对应keydown与keyup方法来监听
keydown()事件
当键盘或按钮被按下时,发生keydown事件。
- keyup()事件
当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上。
$(".target1").keydown(function (e) {
console.log(e.target.value);
$("em").first().text(e.target.value);
});
$(".target2").keyup(function(e) {
console.log(e.target.value);
$("em:last").text(e.target.value);
});
jQuery键盘事件 keypress()事件
在input元素上绑定keydown事件会发现一个问题:
注意:每次获取的内容都是之前输入的,当前输入的获取不到
keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,
到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,
获得的是触发键盘事件后的文本
当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似
keypress事件与keydown和keyup的主要区别
只能捕获单个字符,不能捕获组合键
无法响应系统功能键(如delete,backspace)
不区分小键盘和主键盘的数字字符
总而言之,
KeyPress主要用来接收字母、数字等ANSI字符,
而
KeyDown 和 KeyUP 事件过程可以处理任何不被
KeyPress 识别的击键。
诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等