您的位置:首页 > 产品设计 > UI/UE

query事件整理(多个事件可以同时绑定到一个元素中)

2017-09-03 22:34 309 查看
方法描述
bind() 
   
向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
  
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
  
  
  
  
  
  
  
  
  
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件(当 HTML 文档就绪可用时)
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
unload()触发、或将函数
f619
绑定到指定元素的 unload 事件


实例

当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){
$("p").slideToggle();
});


bind()
方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。


实例

当输入域失去焦点 (blur) 时改变其颜色:
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});


亲自试一试


定义和用法

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。

提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。


实例

当输入域发生变化时改变其颜色:
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});


亲自试一试


定义和用法

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。


实例

当双击按钮时,隐藏或显示元素:
$("button").dblclick(function(){
$("p").slideToggle();
});


亲自试一试


定义和用法

当双击元素时,会发生 dblclick 事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。

在很短的时间内发生两次 click,即是一次 double click 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。

提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。

当点击鼠标时,隐藏或显示 p 元素:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});


亲自试一试


定义和用法

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。


实例

移除所有通过 live() 方法向 p 元素添加的事件处理程序:
$("p").die();


亲自试一试


定义和用法

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

如果图像不存在,则用一段预定义的文本取代它:
$("img").error(function(){
$("img").replaceWith("
Missing image!");
});

亲自试一试


定义和用法

当点击 p 元素时,增加该元素的文本大小:
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});


亲自试一试


定义和用法

one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。

当使用 one() 方法时,每个元素只能运行一次事件处理器函数。

当元素遇到错误(没有正确载入)时,发生 error 事件。

error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。

提示:该方法是 bind('error', handler) 的简写方式。

移除所有 p 元素的事件处理器:
$("button").click(function(){
$("p").unbind();
});


亲自试一试


定义和用法

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

ubind() 适用于任何通过 jQuery 附加的事件处理程序。

当用户点击链接离开本页时,弹出一个消息框:
$(window).unload(function(){
alert("Goodbye!");
});


亲自试一试


定义和用法

当用户离开页面时,会发生 unload 事件。

具体来说,当发生以下情况时,会发出 unload 事件:
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。

unload() 方法只应用于 window 对象。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐