(学习留存，如有侵权，请告知，立刻删除！)
（1）keydown() 事件：
定义：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开；
当按钮被按下时，发生 keydown 事件；
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数；
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；
提示：请使用 .which 属性来确定按下了哪个按键；
实例：当按下按键时，改变文本域的颜色；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生keydown和keyup事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
.which属性：
定义：which属性指示按了哪个键或按钮；
语法：event.which；
event：必需。规定要检查的事件。这个 event 参数来自事件绑定函数；
实例：
显示按了哪个键；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
<body>
请随意键入一些字符：<input type="text" />
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
</body>
触发 keydown 事件：
定义：触发被选元素的 keydown 事件；
语法：$(selector).keydown();
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
<p><button id="btn1">触发输入域的 keydown 事件</button></p>
<p><button id="btn2">触发输入域的 keyup 事件</button></p>
</body>
将函数绑定到 keydown 事件：
定义：规定当被选元素的 keydown 事件发生时运行的函数；
语法：$(selector).keydown(function)；
function：可选。规定当发生 keydown 事件时运行的函数；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
（2）keypress（）事件；
定义：keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上；
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件；
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数；
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；
实例：计算在输入域中的按键次数；
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
触发keypress事件：
定义：触发被选元素的 keypress 事件；
语法：$(selector).keypress()；
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
$("button").click(function(){
$("input").keypress();
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
<button>触发输入域的 keypress 事件</button>
</body>
将函数绑定到 keypress 事件：
定义：规定当被选元素的 keypress 事件发生时运行的函数；
语法：$(selector).keypress(function)；
function：可选。规定当发生 keypress 事件时运行的函数；
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
（3）keyup()事件：
定义：完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位；
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上；
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数；
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；
提示：请使用 .which 属性来确定按下了哪个按键；
实例：当按下按键时，改变文本域的颜色；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
触发 keyup 事件：
定义：触发被选元素的blur事件；
语法：$(selector).keyup()；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
<p><button id="btn1">触发输入域的 keydown 事件</button></p>
<p><button id="btn2">触发输入域的 keyup 事件</button></p>
</body>
将函数绑定到 keyup 事件：
定义：规定当被选元素的 keydown 事件发生时运行的函数；
语法：$(selector).keyup(function)；
function：可选。规定当发生 keyup 事件时运行的函数；
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
（4）live（）事件：
定义：live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）；
实例：当点击按钮时，隐藏或显示 p 元素；
<script type="text/javascript">
$(document).ready(function(){
$("button").live("click",function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>
语法：$(selector).live(event,data,function)；
event：必需。规定附加到元素的一个或多个事件；由空格分隔多个事件。必须是有效的事件；
data：可选。规定传递到该函数的额外数据；
function：必需。规定当事件发生时运行的函数；
如何使用 live() 方法向尚未创建的元素添加事件处理器？
<script type="text/javascript">
$(document).ready(function(){
$("p").live("click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>
</body>
（5）load() 事件：
定义：当指定的元素（及子元素）已加载时，会发生 load() 事件；
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）；
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件；
注释：还存在一个名为 load() 的 jQuery Ajax 方法，根据不同的参数而定；
实例：当图像加载时，改变 div 元素的文本；
<script type="text/javascript">
$(document).ready(function(){
$("img").load(function(){
$("div").text("图像已加载");
});
});
</script>
<body>
<img src="/i/shanghai_lupu_bridge.jpg" />
<div>图像正在加载中 ...</div>
<p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>
</body>
语法：$(selector).load(function)；
function：必需。规定当指定元素加载完成时运行的函数；
（6）mousedown() 事件：
定义：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。
实例：当按下鼠标按钮时，隐藏或显示元素；
<script type="text/javascript">
$(document).ready(function(){
$("button").mousedown(function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
触发 mousedown 事件
语法：$(selector).mousedown()；
<script type="text/javascript">
$(document).ready(function(){
$("button").mousedown(function(){
$("div").slideToggle();
});
$("#mousePara").mouseover(function(){
$("button").mousedown();
});
});
</script>
</head>
<body>
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<button>切换</button>
<p id="mousePara">如果您把鼠标移动本段落上，会激活上面这个按钮的 mousedown 事件。</p>
</body>
将函数绑定到 mousedown 事件
语法：$(selector).mousedown(function)
function：可选。规定当发生 mousedown 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("button").mousedown(function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
（7）mouseenter() 事件：
定义：当鼠标指针穿过元素时，会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。
亲自试一试：mouseenter 与 mouseover 的不同；
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
实例：当鼠标指针进入（穿过）元素时，改变元素的背景色；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
触发 mouseenter 事件
语法：$(selector).mouseenter()；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
$("#btn1").click(function(){
$("p").mouseenter();
});
$("#btn2").click(function(){
$("p").mouseleave();
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseenter 事件</button><br />
<button id="btn2">触发段落的 mouseleave 事件</button>
</body>
将函数绑定到 mouseenter 事件
语法：$(selector).mouseenter(function)
function：可选。规定当发生 mouseenter 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
（8）mouseleave() 方法：
定义：当鼠标指针离开元素时，会发生 mouseleave 事件。
该事件大多数时候会与 mouseenter 事件一起使用。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。
注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。
亲自试一试：mouseleave 与 mouseout 的不同：
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
实例：当鼠标指针离开元素时，改变元素的背景色；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
触发 mouseleave 事件
语法：$(selector).mouseleave()；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
$("#btn1").click(function(){
$("p").mouseenter();
});
$("#btn2").click(function(){
$("p").mouseleave();
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseenter 事件</button><br />
<button id="btn2">触发段落的 mouseleave 事件</button>
</body>
将函数绑定到 mouseleave 事件
语法：$(selector).mouseleave(function)；
function：可选。规定当发生 mouseleave 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
（9）mousemove() 方法：
定义：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。
注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件；
实例：获得鼠标指针在页面中的位置；
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
});
</script>
<body>
<p>鼠标位于坐标： <span></span>.</p>
</body>
触发 mousemove 事件
语法：$(selector).mousemove()；
将函数绑定到 mousemove 事件
语法：$(selector).mousemove(function)；
function：可选。规定当发生 mousemove 事件时运行的函数；
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
});
</script>
<body>
<p>鼠标位于坐标： <span></span>.</p>
</body>
（10）mouseout() 事件：
定义：当鼠标指针从元素上移开时，发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。
亲自试一试：mouseleave 与 mouseout 的不同
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
触发 mouseout 事件
语法：$(selector).mouseout()；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
$("#btn1").click(function(){
$("p").mouseover();
});
$("#btn2").click(function(){
$("p").mouseout();
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseover 事件</button><br />
<button id="btn2">触发段落的 mouseout 事件</button>
</body>
将函数绑定到 mouseout 事件
语法：$(selector).mouseout(function)；
function：可选。规定当发生 mouseout 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
（11）mouseover() 方法：
定义：当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。
亲自试一试：mouseenter 与 mouseover 的不同
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
实例：当鼠标指针位于元素上方时时，改变元素的背景色；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
触发 mouseover 事件
语法：$(selector).mouseover()；
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
$("#btn1").click(function(){
$("p").mouseover();
});
$("#btn2").click(function(){
$("p").mouseout();
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseover 事件</button><br />
<button id="btn2">触发段落的 mouseout 事件</button>
</body>
将函数绑定到 mouseover 事件
语法：$(selector).mouseover(function)；
function：可选。规定当发生 mouseover 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
});
</script>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
（12）mouseup() 事件：
定义：当在元素上放松鼠标按钮时，会发生 mouseup 事件
与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数；
实例：当松开鼠标按钮时，隐藏或显示元素；
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseup(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
触发 mouseup 事件
语法：$(selector).mouseup()；
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseup(function(){
$("div").slideToggle();
});
$("#mousePara").mouseover(function(){
$("button").mouseup();
});
});
</script>
<body>
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<button>切换</button>
<p id="mousePara">如果您把鼠标移动本段落上，会激活上面这个按钮的 mouseup 事件。</p>
</body>
将函数绑定到 mouseup 事件
语法：$(selector).mouseup(function)；
function：可选。规定当发生 mouseup 事件时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseup(function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
