事件 事件处理

on(events,[selector],[data],fn)

概述

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()

参数

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

示例

描述:

Display a paragraph's text in an alert when it is clicked:

$("p").on("click", function(){
alert( $(this).text() );
});

Pass data to the event handler, which is specified here by name:

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$("form").on("submit", false)

Cancel only the default action by using .preventDefault().

$("form").on("submit", function(event) {
  event.preventDefault();
});

Stop submit events from bubbling without preventing form submit, using .stopPropagation().

$("form").on("submit", function(event) {
  event.stopPropagation();
});

和bind相似。

off(events,[selector],[fn])

概述

在选择元素上移除一个或多个事件的事件处理函数。

off() 方法移除用.on()绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。

如果一个简单的事件名称，比如提供"click"，所有 这种类型的事件（包括直接和委派）从jQuery设置的元素上删除。当编写代码，将作为一个插件使用，或者干脆当一个大的代码基础工作，最好的做法是安装和取下使用命名空间的事件，从而使代码不会无意中删除其他代码附加事件处理程序。在一个特定的命名空间中的所有类型的所有事件，可以从一个元素中删除，只是提供了一个命名空间，比如 ".myPlugin"。至少，无论是命名空间或事件名称必须提供。

要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。

处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序，它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制（代理函数），因此，通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下，最好是附加和移除事件处理程序，使用命名空间。

和.on()一样，你可以传递一个 events-map>参数明确的指定而不是用events 和 handler作为单独参数。键事件和/或命名空间;值是处理函数或为false的特殊价值。

参数

events,[selector],[fn]

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

events-map,[selector]

events-map:一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示先前事件绑定的处理函数。

selector:一个最初传递到.on()事件处理程序附加的选择器。

示例

描述:

Remove all event handlers from all paragraphs:

$("p").off()

Remove all delegated click handlers from all paragraphs:

$("p").off( "click", "**" )

Remove just one previously bound handler by passing it as the third argument:

var foo = function () {
  // code to handle some kind of event
};

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);


// ... foo will no longer be called.
$("body").off("click", "p", foo); 

Unbind all delegated event handlers by their namespace:

var validate = function () {
  // code to validate form entries
};

// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);

$("form").on("keypress.validator", "input[type='text']", validate); 

// remove event handlers in the ".validator" namespace

$("form").off(".validator");

bind(type,[data],fn)

概述

为每个匹配元素的特定事件绑定事件处理函数。

参数

type,[data],function(eventObject)

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

type,[data],false

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

events

一个或多个事件类型的字符串和函数的数据映射来执行他们。

示例

描述:

当每个段落被点击的时候，弹出其文本。

jQuery 代码:

$("p").bind("click", function(){
  alert( $(this).text() );
});

描述:

同时绑定多个事件类型

jQuery 代码:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

描述:

同时绑定多个事件类型/处理程序

jQuery 代码:

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

描述:

你可以在事件处理之前传递一些附加的数据。

jQuery 代码:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

描述:

通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; })

描述:

通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

描述:

通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});

one(type,[data],fn)

概述

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数），见示例二。

参数

type,[data],fn

type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data:将要传递给事件处理函数的数据映射

fn:每当事件触发时执行的函数。

示例

描述:

当所有段落被第一次点击的时候，显示所有其文本。

jQuery 代码:

$("p").one("click", function(){
  alert( $(this).text() );
});

trigger(type,[data])

概述

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。

事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。

jQuery也支持 <a href="http://docs.jquery.com/Namespaced_Events">命名空间事件</a>。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。

jQuery 1.3中新增：

所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。

事件对象构造器现在已经公开，并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 <a href="http://docs.jquery.com/Events/jQuery.Event">jQuery.Event</a> 的文档里找到。

你可以有三种方式指定事件类型：

* 你可以传递字符串型的事件名称(type参数)。

* 你可以使用jQuery.Event对象。可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。

* 最后，你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你'''必须'''指定一个 <em>type</em> 属性。

参数

type,[data]

type:一个事件对象或者要触发的事件类型

data:传递给事件处理函数的附加参数

event 

事件发生时运行的函数

示例

描述:

提交第一个表单，但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

描述:

给一个事件传递参数

jQuery 代码:

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

描述:

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

triggerHandler(type, [data])

概述

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

这个方法的行为表现与trigger类似，但有以下三个主要区别：

* 第一，他不会触发浏览器默认事件。

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

参数

type,[data]String,ArrayV1.2

type:要触发的事件类型

data:传递给事件处理函数的附加参数

示例

描述:

如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。

HTML 代码:

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

jQuery 代码:

$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

unbind(type,[data|fn]])

概述

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

参数

type,[fn]

type:删除元素的一个或多个事件,由空格分隔多个事件值。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,false

type:删除元素的一个或多个事件,由空格分隔多个事件值

false:设置为false会使默认的动作失效。

eventObj

事件对象。这个 eventObj 参数来自事件绑定函数

示例

描述:

把所有段落的所有事件取消绑定

jQuery 代码:

$("p").unbind()

描述:

将段落的click事件取消绑定

jQuery 代码:

$("p").unbind( "click" )

描述:

删除特定函数的绑定，将函数作为第二个参数传入

jQuery 代码:

var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo