jQuery 事件介绍
常见 DOM 事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
文档就绪事件
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕（包括图片等)，然后再执行包裹代码 | 只需等待网页中的 DOM 结构加载完毕，就能执行包裹的代码 |
| 执行次数 | 只能执行一次，若执行第二次，则第一次的执行会被覆盖 | 可执行多次，第 N 次不会上一次执行的结果 |
| 简写方案 | 无 | $(function(){ }) |
load()
load() 方法添加事件处理程序到 load 事件。当指定的元素已加载时，会发生 load 事件。该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
$(document).ready(function(){
$("img").load(function(){
alert("图片已载入");
});
});
$(document).ready(function(){
$(window).load(function(){
alert("Page loaded.");
});
});
$(document).ready(function(){
$("img").load(function(){
$("div").text("Image loaded");
});
});
resize()
$(*selector*).resize() 或者 $(*selector*).resize(*function*)
当调整浏览器窗口大小时，发生 resize 事件。
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});
scroll()
$(*selector*).scroll() 或者 $(*selector*).scroll(*function*)
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
x=0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text(x+=1);
});
$("button").click(function(){
$("div").scroll();
});
});
unload()
unload 事件在不同浏览器中效果不一样。Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果
当用户离开页面时，会发生 unload 事件。
unload() 方法只应用于 window 对象
当发生以下情况下，会触发 unload 事件：
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器窗口
- 重新加载页面
$(document).ready(function(){
$(window).unload(function(){
alert("Goodbye!");
});
});
click()
click() 方法是当按钮点击事件被触发时会调用一个函数
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
hover()
hover() 方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$(document).ready(function(){
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
});focus()、blur()
$(*selector*).focus() 或者 $(*selector*).focus(*function*)
当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
$(*selector*).blur() 或者 $(*selector*).blur(*function*)
当元素失去焦点时，发生 blur 事件
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
submit()
$(*selector*).submit() 或者 $(*selector*).submit(*function*)
<head>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("提交");
});
});
</script>
</head>
<body>
<form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
</body>
- 使用
event.preventDefault()方法阻止表单被提交
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
alert("阻止表单提交");
});
});
change()
$(*selector*).change() 或者 $(*selector*).change(*function*)
当元素的值改变时发生 change 事件（仅适用于表单字段）
注意：
- 当用于 select 元素时，change 事件会在选择某个选项时发生。
- 当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
$(document).ready(function(){
$("input").change(function(){
$(this).css("background-color","#D6D6FF");
});
});
keypress()
$(*selector*).keypress() 或者 $(*selector*).keypress(*function*)
keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键
与 keypress 事件相关的事件顺序：
- keydown - 键按下的过程
- keypress - 键被按下
- keyup - 键被松开
i=0;
$(document).ready(function(){
$("p").keypress(function(){
$("span").text(i+=1);
});
$("button").click(function(){
$("p").keypress();
});
});
$(window).keypress(function(event){
//event.which 是获取 ASCII 码，前面的函数是将 ASCII 码转换成字符，空格键和 Enter 键输出均为空白。
console.log(String.fromCharCode(event.which));
//从 event 对象中 key 属性获取字符，但是 Enter 键的 key 值为"Enter"，空白键还是空白" "。
console.log(event.key);
});
传递数据给事件处理函数: jQueryObject.keypress( [[ data ,] handler ] );
- data: 通过
event.data传递给事件处理函数的任意数据; - handler: 指定的事件处理函数;
// 只允许按下的字母键生效, 65~90 是所有大写字母的键盘代码范围. var validKeys = { start: 65, end: 90 }; $("#keys").keypress( validKeys, function(event){ var keys = event.data; //拿到 validKeys 对象. return event.which >= keys.start && event.which <= keys.end; } );
keydown()
$(*selector*).keydown() 或者 $(*selector*).keydown(*function*)
当键盘键被按下时发生 keydown 事件。使用 event.which 属性来返回哪个键盘键被按下
$(window).keydown( function(event){
// 通过 event.which 可以拿到按键代码. 如果是 keypress 事件中,则拿到 ASCII 码.
} );
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","lightblue");
});
$("input").keyup(function(){
$("input").css("background-color","lavender");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
keyup()
$(*selector*).keyup() 或者 $(*selector*).keyup(*function*)
当键盘键被松开时发生 keyup 事件
使用 event.which 属性来返回哪个键被按下
$(document).ready(function(){
$("input").keyup(function(event){
$("div").html("Key: " + event.which);
});
});如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： jQuery 使用前注意事项
下一篇： 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论