jQuery事件
jQuery事件
常见 DOM 事件：
一、鼠标事件
1，click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
2，dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); });
3，mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); });
4，mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); });
5，mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$(document).ready(function(){ $("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); }); });
6，mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$(document).ready(function(){ $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); });
7，hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$(document).ready(function(){ $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ) });
二、键盘事件
与 keypress 事件相关的事件顺序：
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。
三、表单事件
1，submit()
当提交表单时，会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
$(document).ready(function(){ $("form").submit(function(){ alert("提交"); }); });
2，change()
当元素的值改变时发生 change 事件（仅适用于表单字段）。
change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
$(document).ready(function(){ $("input").change(function(){ alert("文本已被修改"); }); });
3，focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); });
9，blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); });
四、文档/窗口事件
1，load()
load() 方法在 jQuery 版本 1.8 中已废弃。
load() 方法添加事件处理程序到 load 事件。
当指定的元素已加载时，会发生 load 事件。
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
注意：还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法。
$(document).ready(function(){ $("img").load(function(){ alert("图片已载入"); }); });
2，resize()
当调整浏览器窗口大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 focus 事件时运行的函数。
x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); }); });
3，scroll()
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
x=0; $(document).ready(function(){ $("div").scroll(function(){ $("span").text(x+=1); }); });
4，unload()
unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。
Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。
当用户离开页面时，会发生 unload 事件。
当发生以下情况下，会触发 unload 事件：
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器窗口
- 重新加载页面
unload() 方法规定当 unload 事件发生时会发生什么。
unload() 方法只应用于 window 对象。
注意：unload 事件在不同浏览器中效果不一样，请确保使用前在所有浏览器测试该方法。
$(document).ready(function(){ $(window).unload(function(){ alert("Goodbye!"); }); });
