jQuery 事件总结
jQuery 事件 - click() 方法
定义和用法
当点击元素时，会发生 click 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
实例
当点击按钮时，隐藏或显示元素：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>切换</button> </body> </html>
jQuery 事件 - focus() 方法（与 blur() 相反）
定义和用法
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
实例
当输入框获得焦点时，改变它的背景色：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p> </body> </html>
jQuery 事件 - blur() 方法
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。
实例
当输入域失去焦点 (blur) 时改变其颜色：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p> </body> </html>
jQuery 事件 - bind() 方法
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
实例
当点击鼠标时，隐藏或显示 p 元素：
$("button").bind("click",function(){
$("p").slideToggle();
});
jQuery 事件 - change() 方法
定义和用法
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
实例
当输入域发生变化时改变其颜色：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".field").change(function(){ $(this).css("background-color","#FFFFCC"); }); }); </script> </head> <body> <p>在某个域被使用或改变时，它会改变颜色。</p> Enter your name: <input class="field" type="text" /> <p>Car: <select class="field" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </p> </body> </html>
触发 change 事件
触发被选元素的 change 事件。
语法
$(selector).change()
将函数绑定到 change 事件
规定当被选元素的 change 事件发生时运行的函数。
语法
$(selector).change(function)
jQuery 事件 - dblclick() 方法
定义和用法
当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
在很短的时间内发生两次 click，即是一次 double click 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。
实例
当双击按钮时，隐藏或显示元素：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").dblclick(function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>请双击此处</button> </body> </html>
触发 dblclick 事件
语法
$(selector).dblclick()
将函数绑定到 dblclick 事件
语法
$(selector).dblclick(function)
jQuery 事件 - delegate() 方法
定义和用法
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
实例
当点击鼠标时，隐藏或显示 p 元素：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("button","click",function(){ $("p").slideToggle(); }); }); </script> </head> <body> <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> </body> </html>
语法
$(selector).delegate(childSelector,event,data,function)
| 参数 | 描述 |
|---|---|
| childSelector | 必需。规定要附加事件处理程序的一个或多个子元素。 |
| event |
必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 必需。规定当事件发生时运行的函数。 |
jQuery 事件 - die() 方法
定义和用法
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
实例
移除所有通过 live() 方法向 p 元素添加的事件处理程序：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").live("click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("p").die(); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落。</p> <p>请点击任意 p 元素，段落会消失。包括本段落。</p> <button>移除通过 live() 方法向 p 元素添加的事件处理程序</button> </body> </html>
jQuery 事件 - error() 方法
定义和用法
当元素遇到错误（没有正确载入）时，发生 error 事件。
error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。
提示：该方法是 bind('error', handler) 的简写方式。
实例
如果图像不存在，则用一段预定义的文本取代它：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").error(function(){ $("img").replaceWith("<p><b>图片未加载！</b></p>"); }); }); </script> </head> <body> <img src="errorimg.gif" /> <p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p> </body> </html>
jQuery 事件 - isDefaultPrevented() 方法
定义和用法
isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
实例
防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); alert("Default prevented: " + event.isDefaultPrevented()); }); }); </script> </head> <body> <a href="http://w3school.com.cn/">W3School</a> <p>preventDefault() 方法将防止上面的链接打开 URL。</p> <p>请点击该链接，检查是否阻止了默认动作。</p> </body> </html>
jQuery 事件 - preventDefault() 方法
定义和用法
preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
实例
防止链接打开 URL：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); }); }); </script> </head> <body> <a href="http://w3school.com.cn/">W3School</a> <p>preventDefault() 方法将防止上面的链接打开 URL。</p> </body> </html>
jQuery 事件 - pageX 属性
定义和用法
pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
实例
显示鼠标指针的位置：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); }); </script> </head> <body> <p>鼠标指针位于： <span></span></p> </body> </html>
jQuery 事件 - pageY 属性
定义和用法
pageY() 属性是鼠标指针的位置，相对于文档的上边缘。
实例
显示鼠标指针的位置：
$(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); });
jQuery 事件 - result 属性
定义和用法
result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
实例
显示最后一次点击事件返回的结果：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e) { return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY); }); $("button").click(function(e) { $("p").html(e.result); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>请点击这里</button> </body> </html>
jQuery 事件 - target 属性
定义和用法
target 属性规定哪个 DOM 元素触发了该事件。
实例
显示哪个 DOM 元素触发了事件：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p, button, h1, h2").click(function(event){ $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发"); }); }); </script> </head> <body> <h1>这是一个标题</h1> <h2>这是另一个标题</h2> <p>这是一个段落</p> <button>这是一个按钮</button> <p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p> <div></div> </body> </html>
jQuery 事件 - timeStamp 属性
定义和用法
timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
实例
显示出当对按钮元素的点击事件发生时的时间戳：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e){ $("span").text(e.timeStamp); }); }); </script> </head> <body> <p>对下面这个按钮的点击事件发生在 2018年 9 月 20 日之后 <span>unknown</span> 毫秒。</p> <button>Click me</button> </body> </html>
jQuery 事件 - type 属性
定义和用法
type 属性描述触发哪种事件类型。
实例
显示触发了哪种类型的事件：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").bind('click dblclick mouseover mouseout',function(event){ $("div").html("事件：" + event.type); }); }); </script> </head> <body> <p>该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件，下面的 div 中会显示出事件的类型。</p> <div></div> </body> </html>
jQuery 事件 - which 属性
定义和用法
which 属性指示按了哪个键或按钮。
实例
显示按了哪个键：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").keydown(function(event){ $("div").html("Key: " + event.which);//Key: 8 }); }); </script> </head> <body> 请随意键入一些字符：<input type="text" /> <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p> <div /> </body> </html>
jQuery 事件 - keydown() 方法
定义和用法
完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发生 keydown 事件。
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
提示：请使用 .which 属性来确定按下了哪个按键（亲自试一试）。
实例
当按下按键时，改变文本域的颜色：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p> </body> </html>
jQuery 事件 - keypress() 方法
定义和用法
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
实例
计算在输入域中的按键次数：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> i=0; $(document).ready(function(){ $("input").keypress(function(){ $("span").text(i+=1); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>Keypresses:<span>0</span></p> </body> </html>
jQuery 事件 - keyup() 方法
定义和用法
完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
提示：请使用 .which 属性来确定按下了哪个按键（亲自试一试）。
实例
当按下按键时，改变文本域的颜色：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p> </body> </html>
更多请参考jQuery 事件参考手册
