## 失焦 blur(\[\[data,\] fn\]) 概述：当元素失去焦点时触发 blur 事件。 ~~~ $(":text").blur(); // 触发所有文本框的 blur 事件 // 触发所有文本框的 blur 事件，打印输入值 $(":text").blur(function() { console.log($(this).val()); }); ~~~ ## 改变 change(\[\[data,\] fn\]) 概述：当元素的值发生改变时，会发生 change 事件。 ~~~ // 输入框内容改变时，打印输入值 $(":text").change(function() { console.log($(this).val()); }); ~~~ ## 单击 click(\[\[data,\] fn\]) 概述：触发每一个匹配元素的 click 事件。 ~~~ $('button').click(); // 触发页面内所有按钮的点击事件 // 点击按钮隐藏所有段落 $('#btn1').click(function () { $('p').hide(); }); ~~~ ## 双击 dblclick(\[\[data,\] fn\]) 概述：当双击元素时，会发生 dblclick 事件。 ~~~ $("button").dblclick(function () { alert("Hello World!"); }); ~~~ ## 聚焦 focus(\[\[data,\] fn\]) 概述：当元素获得焦点时，触发 focus 事件。 ~~~ // 当页面加载后将 id 为 'login' 的元素设置焦点 $(document).ready(function(){ $("#login").focus(); }); // 获得焦点时，打印的文本框的值 $(":text").focus(function(){ console.log($(this).val()); }); ~~~ ## 聚焦 focusin(\[\[data,\] fn\]) 概述：当元素获得焦点时，触发 focusin 事件。可以在父元素上检测子元素获取焦点的情况。 ~~~ <p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p> // 获得焦点后会触发动画 $("p").focusin(function() { $(this).find("span").css('color','red').fadeOut(1000); }); ~~~ ## 失焦 focusout(\[\[data,\] fn\]) 概述：当元素失去焦点时触发 focusout 事件。可以在父元素上检测子元素失去焦点的情况。 ~~~ // 失去焦点后会触发动画 $("p").focusout(function() { $(this).find("span").css('color', 'blue').fadeOut(1000); }); ~~~ ## 按键 keypress(\[\[data,\] fn\]) 概述：当键盘或按钮被按下时，发生 keypress 事件。 ~~~ $(':text').keypress(function(event) { console.log(event.keyCode); }); ~~~ ## 键下 keydown(\[\[data,\] fn\]) 概述：当键盘或按钮被按下时，发生 keydown 事件。 ~~~ // 在页面内对键盘按键做出回应 $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的 keycode 不同 // 常用 keyCode： 空格 32 Enter 13 ESC 27 } }); ~~~ ## 键升 keyup(\[\[data,\] fn\]) 概述：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。 ~~~ // 当按下按键时，改变文本域的颜色 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); ~~~ ## 鼠标按下 mousedown(\[\[data,\] fn\]) 概述：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。 ~~~ // 当按下鼠标按钮时，隐藏或显示元素 $("button").mousedown(function(){ $("p").slideToggle(); }); ~~~ ## 鼠标抬起 mouseup(\[\[data,\] fn\]) 概述：当在元素上放松鼠标按钮时，会发生 mouseup 事件。 ~~~ // 当松开鼠标按钮时，隐藏或显示元素 $("button").mouseup(function(){ $("p").slideToggle(); }); ~~~ ## 进入 mouseenter(\[\[data,\] fn\]) 概述：当鼠标指针穿过元素时，会发生 mouseenter 事件。 ~~~ // 当鼠标指针进入（穿过）元素时，改变元素的背景色 $("p").mouseenter(function(){ $(this).css("background-color","yellow"); }); ~~~ ## 离开 mouseleave(\[\[data,\] fn\]) 概述：当鼠标指针离开元素时，会发生 mouseleave 事件。 ~~~ // 当鼠标指针离开元素时，改变元素的背景色 $("p").mouseleave(function(){ $(this).css("background-color","green"); }); ~~~ ## 移动 mousemove(\[\[data,\] fn\]) 概述：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。 ~~~ // 获得鼠标指针在页面中的位置 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); ~~~ ## 上方 mouseover(\[\[data,\] fn\]) 概述：当鼠标指针位于元素上方时，会发生 mouseover 事件。不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 ~~~ // 当鼠标指针位于元素上方时时，改变元素的背景色 $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); ~~~ ## 离开 mouseout(\[\[data,\] fn\]) 概述：当鼠标指针从元素上移开时，发生 mouseout 事件。不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 ~~~ // 当鼠标从元素上移开时，改变元素的背景色 $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); }); ~~~ ## 调整大小 resize(\[\[data,\] fn\]) 概述：当调整浏览器窗口的大小时，发生 resize 事件。 ~~~ // 对浏览器窗口调整大小进行提示 $(window).resize(function() { $('span').text('刚才调整了窗口大小'); }); ~~~ ## 滚动 scroll(\[\[data,\] fn\]) 概述：当用户滚动指定的元素时，会发生 scroll 事件。 ~~~ // 当页面滚动条变化时，进行提示 $(window).scroll(function(event) { console.log('正在滚动页面'); console.log(event); }); ~~~ ## 选择 select(\[\[data,\] fn\]) 概述：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。 ~~~ // 当文本框中文本被选中时执行的函数 $(":text").select( function () { /* ...do something... */ } ); ~~~ ## 提交 submit(\[\[data,\] fn\]) 概述：当提交表单时，会发生 submit 事件。 ~~~ $("form:first").submit(); // 提交表单 // 阻止表单提交 $("form").submit(function (event) { return false; }); ~~~