jQuery 事件

来源：互联网发布：海康威视管理端口设置编辑：程序博客网时间：2024/06/03 10:49

一、事件模型

jQuery 事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：

     $("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例：

     $("button#demo").click(function(){           $("img").hide();      });

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

方法

描述

blur()

触发、或将函数绑定到指定元素的 blur 事件

change()

触发、或将函数绑定到指定元素的 change 事件

click()

触发、或将函数绑定到指定元素的 click 事件

dblclick()

触发、或将函数绑定到指定元素的 double click 事件

error()

触发、或将函数绑定到指定元素的 error 事件

focus()

触发、或将函数绑定到指定元素的 focus 事件

keydown()

触发、或将函数绑定到指定元素的 key down 事件

keypress()

触发、或将函数绑定到指定元素的 key press 事件

keyup()

触发、或将函数绑定到指定元素的 key up 事件

load()

触发、或将函数绑定到指定元素的 load 事件

mousedown()

触发、或将函数绑定到指定元素的 mouse down 事件

mouseenter()

触发、或将函数绑定到指定元素的 mouse enter 事件

mouseleave()

触发、或将函数绑定到指定元素的 mouse leave 事件

mousemove()

触发、或将函数绑定到指定元素的 mouse move 事件

mouseout()

触发、或将函数绑定到指定元素的 mouse out 事件

mouseover()

触发、或将函数绑定到指定元素的 mouse over 事件

mouseup()

触发、或将函数绑定到指定元素的 mouse up 事件

ready()

文档就绪事件（当 HTML 文档就绪可用时）

resize()

触发、或将函数绑定到指定元素的 resize 事件

scroll()

触发、或将函数绑定到指定元素的 scroll 事件

select()

触发、或将函数绑定到指定元素的 select 事件

submit()

触发、或将函数绑定到指定元素的 submit 事件

unload()

触发、或将函数绑定到指定元素的 unload 事件

二、管理事件

1、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。

            var jq=jQuery.noConflict();

帮助您使用自己的名称（比如 jq）来代替 $ 符号。

2、绑定事件：使用on()和bind()绑定

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

语法：$(selector).bind(event,data,function)

event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

实例：

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").bind("click",function(){    $("p").slideToggle();  });});</script></head><body><p>This is a paragraph.</p><button>请点击这里</button></body></html>

替代语法：$(selector).bind({event:function, event:function, ...})

{event:function, event:function, ...}必需。规定事件映射，其中包含一个或多个添加到元素的事件，以及当事件发生时运行的函数。

实例：

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").bind({    click:function(){$("p").slideToggle();},    mouseover:function(){$("body").css("background-color","red");},      mouseout:function(){$("body").css("background-color","#FFFFFF");}    });});</script></head><body><p>This is a paragraph.</p><button>请点击这里</button></body></html>

on()方法已经被bind()方法替代，两个方法使用差不太多。

3、绑定事件：快速绑定方法

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

快速绑定方法为：

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

4、绑定事件：使用one()绑定

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行一次响应之后就会失效。

语法：$(selector).one(event,data,function)

event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

实例：

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("p").one("click",function(){    $(this).animate({fontSize:"+=6px"});  });});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p></body></html>

5、注销事件

one()自动删除事件，on()和bind()需要手工清除，有off()和unbind()方法删除绑定的事件。

unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。

（1）、取消绑定元素的事件处理程序和函数

规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

语法：$(selector).unbind(event,function)

event可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。

function可选。规定从元素的指定事件取消绑定的函数名。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("p").click(function(){    $(this).slideToggle();  });  $("button").click(function(){    $("p").unbind();  });});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><p>点击任何段落可以令其消失。包括本段落。</p><button>删除 p 元素的事件处理器</button></body></html>

（2）、使用 Event 对象来取消绑定事件处理程序

规定要删除的事件对象。用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

语法：$(selector).unbind(eventObj)

eventObj可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  var x=0;  $("p").click(function(e){    $("p").animate({fontSize:"+=5px"});    x++;    if (x>=2)      {      $(this).unbind(e);      }  });});</script></head><body><p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p></body></html>

6、event对象

方法

描述

event.isDefaultPrevented()

返回 event 对象上是否调用了 event.preventDefault()。

event.pageX

相对于文档左边缘的鼠标位置。

event.pageY

相对于文档上边缘的鼠标位置。

event.preventDefault()

阻止事件的默认动作。

event.result

包含由被指定事件触发的事件处理器返回的最后一个值。

event.target

触发该事件的 DOM 元素。

event.timeStamp

该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。

event.type

描述事件的类型。

event.which

指示按了哪个键或按钮。

7、事件触发

trigger() 方法触发被选元素的指定事件类型。

（1）、触发事件

规定被选元素要触发的事件。

语法：$(selector).trigger(event,[param1,param2,...])

event必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。

[param1,param2,...] 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("input").select(function(){    $("input").after("文本被选中！");  });  $("button").click(function(){    $("input").trigger("select");  });});</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>

（2）、使用 Event 对象来触发事件

规定使用事件对象的被选元素要触发的事件。

语法：$(selector).trigger(eventObj)

eventObj 必需。规定事件发生时运行的函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("input").select(function(){    $("input").after("文本被选中！");  });  var e = jQuery.Event("select");  $("button").click(function(){    $("input").trigger(e);  });});</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>

8、事件切换

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。

（1）、向 Toggle 事件绑定两个或更多函数

当指定元素被点击时，在两个或多个函数之间轮流切换。如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

语法：$(selector).toggle(function1(),function2(),functionN(),...)

function1()必需。规定当元素在每偶数次被点击时要运行的函数。

function2()必需。规定当元素在每奇数次被点击时要运行的函数。

functionN(),...可选。规定需要切换的其他函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").toggle(function(){    $("body").css("background-color","green");},    function(){    $("body").css("background-color","red");},    function(){    $("body").css("background-color","yellow");}  );});</script></head><body><button>请点击这里，来切换不同的背景颜色</button></body></html>

（2）、切换 Hide() 和 Show()

检查每个元素是否可见。如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。

语法：$(selector).toggle(speed,callback)

speed可选。规定 hide/show 效果的速度。默认是 "0"。可能的值：毫秒（比如 1500）、"slow"、"normal"、"fast"

callback可选。当 toggle() 方法完成时执行的函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $(".btn1").click(function(){  $("p").toggle(1000);  });});</script></head><body><p>This is a paragraph.</p><button class="btn1">Toggle</button></body></html>

（3）、显示或隐藏元素

规定是否只显示或只隐藏所有匹配的元素。

语法：$(selector).toggle(switch)

switch 必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。true - 显示元素、false - 隐藏元素

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $(".btn1").click(function(){    $("p").toggle(true);  });});</script></head><body><p>This is a paragraph.</p><p style="display:none">This is another paragraph.</p><p>把 switch 参数设置为 false，可以隐藏所有段落。</p><button class="btn1">显示所有 p 元素</button></body></html>

9、事件委派

（1）、delegate() 方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法：$(selector).delegate(childSelector,event,data,function)

childSelector必需。规定要附加事件处理程序的一个或多个子元素。

event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data可选。规定传递到函数的额外数据。

function必需。规定当事件发生时运行的函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("div").delegate("p","click",function(){    $(this).slideToggle();  });  $("button").click(function(){    $("<p>这是一个新段落。</p>").insertAfter("button");  });});</script></head><body><div style="background-color:yellow"><p>这是一个段落。</p><p>请点击任意一个 p 元素，它会消失。包括本段落。</p><button>在本按钮后面插入一个新的 p 元素(点击会消失)</button></div><p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p></body></html>

（2）、live() 方法

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

语法：$(selector).live(event,data,function)

event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data可选。规定传递到该函数的额外数据。

function必需。规定当事件发生时运行的函数。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("p").live("click",function(){    $(this).slideToggle();  });  $("button").click(function(){    $("<p>This is a new paragraph.</p>").insertAfter("button");  });});</script></head><body><p>这是一个段落。</p><p>点击任意 p 元素会令其消失。包括本段落。</p><button>在本按钮后面插入新的 p 元素</button><p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p></body></html>

delegate()方法和live()用法和效果差不多，但是和bind()方法不同，bind()方法在点击“在本按钮后面插入新的 p 元素”按钮后动态生成的p元素不会拥有click事件，所以点击动态生成的p元素不会隐藏。

（3）、undelegate()

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

语法：$(selector).undelegate(selector,event,function)

selector可选。规定需要删除事件处理程序的选择器。

event可选。规定需要删除处理函数的一个或多个事件类型。

function可选。规定要删除的具体事件处理函数。

<html><head><meta charset="UTF-8"/><script type="text/javascript" src="js/jquery.js"></script><script>$(document).ready(function(){  $("body").delegate("p","click",function(){    $(this).slideToggle();  });  $("button").click(function(){    $("body").undelegate();  });});</script></head><body><p>这是一个段落。</p><p>这是另外一个段落。</p><p>点击任意段落(p 元素)，该段落就会消失。</p><button>使用 delegate() 方法移除所有段落(p 元素)的事件句柄</button></body></html>

10、管理事件

方法

描述

bind()

向匹配元素附加一个或更多事件处理器

delegate()

向匹配元素的当前或未来的子元素附加一个或多个事件处理器

die()

移除所有通过 live() 函数添加的事件处理程序。

live()

为当前或未来的匹配元素添加一个或多个事件处理器

one()

向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

toggle()

绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

trigger()

所有匹配元素的指定事件

triggerHandler()

第一个被匹配元素的指定事件

unbind()

从匹配元素移除一个被添加的事件处理器

undelegate()

从匹配元素移除一个被添加的事件处理器，现在或将来

0 0