jQuery事件总结
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);
});
jQuery事件总结的更多相关文章
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- 解密jQuery事件核心 - 委托设计(二)
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
随机推荐
- C++学习笔记 知识集锦(一)
1.内存管理的开销 2.函数调用框架 3.类为什么要定义在头文件 4.C++的组合 5.在类的外部定义成员函数 6.bool类型为什么可以当做int类型 7.无符号保留原则 8.C++类型检查 9.何 ...
- equals == 比较
public class Equals{ public static void main(String[] args){ Interger n1=new Interger(47); Interger ...
- [SharePoint 2010] Modify lookup mapping with PowerShell
SharePoint支持将列表保存成列表模板,但当列表包含Lookup字段时,通过模板创建的列表会丢失Lookup字段的信息. 通过PowerShell,可以修改Lookup字段的xml内容. Fun ...
- Java提高篇——对象克隆(复制)
假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...
- 通过数据库查看EBS的登录地址
1. SQL> SELECT home_url FROM icx_parameters; HOME_URL ------------------------------------------- ...
- freemarker 数据做加减计算
controller的部分: @Controller@RequestMapping("/ContactsFrameIndex")public class ContactsFrame ...
- servlet内置对象
request 请求对象 类型javax.servlet.ServletRequest 作用域Request response ...
- Java被忽略的基本知识(四)
Java IO(不是一般的重要) 54.IO中的流:字节流(InputStream.OutputStream).字符流(Reader.Writer).转换流(InputStreamReader.Out ...
- 通什翡翠商城大站协议邮件群发系统日发20-30万封不打码不换ip不需发件箱100%进收件箱
用一种新的技术思维去群发邮件一种不用换IP,不需要任何发件箱的邮件群发方式一种不需要验证码,不需要**代码变量的邮件群发方式即使需要验证码也能全自动识别验证码的超级智能软件教你最核心的邮件群发思维和软 ...
- mysql 性能优化方案1
网 上有不少mysql 性能优化方案,不过,mysql的优化同sql server相比,更为麻烦与复杂,同样的设置,在不同的环境下 ,由于内存,访问量,读写频率,数据差异等等情况,可能会出现不同的结果 ...