jQuery事件总结

Posted 2020-08-23 学习笔记和总结

blur()
触发或绑定blur事件。
$("input").blur(function(){
　　$("input").css("background-color","#D6D6FF");
});

change()
触发或绑定change事件, 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
$(".field").change(function(){
　　$(this).css("background-color","#FFFFCC");
});

click()
触发或绑定click事件。
$("button").click(function(){
　　$("p").slideToggle();
});

dblclick()
触发或绑定dblclick事件。

error()
触发或绑定error事件, 当元素遇到错误（没有正确载入）时，发生 error 事件。
$("img").error(function(){
　　$("img").replaceWith("Missing image!");
});

focus()
触发或绑定focus事件，当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
　　$("input").css("background-color","#FFFFCC");
});

resize()
触发或绑定resize事件，当调整浏览器窗口的大小时，发生 resize 事件。

scroll()
触发或绑定scroll事件，当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

select()
触发或绑定select事件，当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
$("input").select(function(){
　　$("input").after(" Text marked!");
});

submit()
触发或绑定submit事件，当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
$(selector).submit()

keydown() 触发或绑定指定元素的keydown事件
keypress() 触发或绑定指定元素的keypress事件
keyup() 触发或绑定指定元素的keyup事件
当按钮被按下时，发生keydown事件;当按钮被松开时，发生keyup事件;按键按下并松开,发生keypress事件.
$("input").keydown(function(){
　　$("input").css("background-color","#FFFFCC");
});

load()
当指定的元素（及子元素）已加载时，会发生load事件,适用于任何带有URL的元素（比如图像、脚本、框架、内联框架）。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发load事件。
$("img").load(function(){
　　$("div").text("Image loaded");
});

unload()
当用户离开页面时，会发生 unload 事件, 包括以下情况时：
点击某个离开页面的链接;在地址栏中键入了新的URL;使用前进或后退按钮;关闭浏览器;重新加载页面
unload() 方法只应用于 window 对象。
$(window).unload(function(){
　　alert("Goodbye!");
});
$("p").click(function(e){
　　$("p").animate({fontSize:"+=5px"});
　　$(this).unbind(e);
});

mousedown() 触发或将函数绑定到指定元素的mousedown事件
mouseenter() 触发或将函数绑定到指定元素的mouseenter事件
mouseleave() 触发或将函数绑定到指定元素的mouseleave事件
mousemove() 触发或将函数绑定到指定元素的mousemove事件
mouseout() 触发或将函数绑定到指定元素的mouseout事件
mouseover() 触发或将函数绑定到指定元素的mouseover事件
mouseup() 触发或将函数绑定到指定元素的mouseup事件
$("button").mousedown(function(){
　　$("p").slideToggle();
});

ready()
规定当 ready 事件发生时执行的代码。
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready() 函数仅能用于当前文档，因此无需选择器。
允许使用以下三种语法：
$(document).ready(function)
$().ready(function)
$(function)

toggle()
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
$("p").toggle(
　　function(){
　　　　$("body").css("background-color","green");},
　　function(){
　　　　$("body").css("background-color","red");},
　　function(){
　　　　$("body").css("background-color","yellow");}
);

trigger()
触发被选元素的指定事件类型。
$("button").click(function(){
　　$("input").trigger("select");
});

 

triggerHandler()

触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。
与 trigger() 方法相比的不同之处:
它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
$("button").click(function(){
　　$("input").triggerHandler("select");
});

 

bind()
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$("button").bind("click",function(){
　　$("p").slideToggle();
});

unbind()
移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
unbind()适用于任何通过jQuery附加的事件处理程序,取消绑定元素的事件处理程序和函数
如果没有规定参数，unbind()方法会删除指定元素的所有事件处理程序。
$("button").click(function(){
　　$("p").unbind();
});

live()
为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
$("button").live("click",function(){
　　$("p").slideToggle();
});

die()
移除所有通过live()方法向指定元素添加的一个或多个事件处理程序。
$("p").die();

one()
为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
当使用one()方法时，每个元素只能运行一次事件处理器函数。
$("p").one("click",function(){
　　$(this).animate({fontSize:"+=6px"});
});

preventDefault()
阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
$("a").click(function(event){
event.preventDefault();
});

 

event属性:

result 属性
包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
$("button").click(function(e) {
　　$("p").html(e.result);
});

target 属性
规定哪个 DOM 元素触发了该事件。
$("p, button, h1, h2").click(function(event){
$("div").html("Triggered by a " + event.target.nodeName + " element.");
});

timeStamp 属性
包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
$("button").click(function(event){
　　$("span")html(event.timeStamp);
});

type 属性
描述触发哪种事件类型。
$("p").bind(‘click dblclick mouseover mouseout‘,function(event){
$("div").html("Event: " + event.type);
});

which 属性
指示按了哪个键或按钮。
$("input").keydown(function(event){
　　$("div").html("Key: " + event.which);
});

pageX() 属性
鼠标指针的位置，相对于文档的左边缘。
pageY() 属性
鼠标指针的位置，相对于文档的上边缘。
$(document).mousemove(function(e){
　　$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});