jQuery事件

jQuery JavaScript 动态操作dom,事件 操作的是谁 选择器 ID class 元素

JQuery的特点

1.化繁为简

2.兼容性

jQuery对象和dom对象之间的相互转换

dom对象

var userid = document.getElementById("userid")；

dom对象==》jQuery对象

var userid = $(dom2);

jQuery对象==》dom对象

var userid =$("input[name'userid']")[1];

-------------------------------------------------------------------------------------------

添加、删除一(多)个事件

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

$("button").bind("click",function(){ $("p").slideToggle();});

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

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

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

移除所有 p 元素的事件处理器：

$("button").click(function(){ $("p").unbind();});

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

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

当点击鼠标时，隐藏或显示 p 元素：

$("div").delegate("button","click",function(){ $("p").slideToggle();});

undelegate() 方法 删除由 delegate() 方法添加的一个或多个事件 处理程序。

从所有元素删除由 delegate() 方法添加的所有事件处理器：

$("body").undelegate();

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

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

$("button").live("click",function(){ $("p").slideToggle();});

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

移除所有通过 live() 方法向 p 元素添加的事件处理程序：

$("p").die();

-------------------------------------------------------------------------------------------

获得失去焦点

1.当元素 获得焦点 时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

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

$("input").focus(function(){ $("input").css("background-color","#FFFFCC");});

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

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

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

$("input").blur(function(){ $("input").css("background-color","#D6D6FF");});

3. 当 元素的值发生改变 时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。 此事件是在改变后失去焦点时触发

$(".field").change(function(){ $(this).css("background-color","#FFFFCC");});

4. 点击事件

5. 双击事件

-------------------------------------------------------------------------------------------

mouse事件

1.当鼠标指针 位于元素上方 时，会发生 mouseover 事件。

该事件大多数时候会与  mouseout  事件一起使用。

当鼠标指针位于元素上方时时，改变元素的背景色：

$("p").mouseover(function(){ $("p").css("background-color","yellow");});

2. 当鼠标指针 从元素上移开 时，发生 mouseout 事件。

该事件大多数时候会与  mouseover  事件一起使用。

当鼠标从元素上移开时，改变元素的背景色：

$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});

mouseover与mouseenter的区别

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

3.当鼠标指针 穿过元素 时，会发生 mouseenter 事件。

该事件大多数时候会与  mouseleave  事件一起使用。

当鼠标指针进入（穿过）元素时，改变元素的背景色：

$("p").mouseenter(function(){ $("p").css("background-color","yellow");});

4. 当鼠标指针 离开元素 时，会发生 mouseleave 事件。

该事件大多数时候会与  mouseenter  事件一起使用。

当鼠标指针离开元素时，改变元素的背景色：

$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});

-------------------------------------------------------------------------------------------

key事件

2.完整的 key press 过程分为两个部分：1. 按键被按下 ；2. 按键被松开。

当按钮被按下时，发生 keydown 事件。

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

$("input").keydown(function(){ $("input").css("background-color","#FFFFCC");});

3.当 按钮被松开 时，发生 keyup 事件。它发生在当前获得焦点的元素上。

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

$("input").keyup(function(){ $("input").css("background-color","#D6D6FF");});

4.keypress 事件与 keydown 事件类似。当 按钮被按下 时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每 插入 一个字符，就会发生 keypress 事件。 不接受汉字 只接受 字母数字 符号

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。 与keydown的区别

$("input").keydown(function(){ $("span").text(i+=1);});

-------------------------------------------------------------------------------------------

加载 离开页面

当 指定的元素（及子元素）已加载时 ，会发生 load() 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

当图像加载时，改变 div 元素的文本：

$("img").load(function(){ $("div").text("Image loaded");});

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

具体来说，当发生以下情况时，会发出 unload 事件：

• 点击某个离开页面的链接
• 在地址栏中键入了新的 URL
• 使用前进或后退按钮
• 关闭浏览器
• 重新加载页面

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

unload() 方法只应用于 window 对象。

当用户点击链接离开本页时，弹出一个消息框：

$(window).unload(function(){ alert("Goodbye!");});