发布在：事件

处理事件

jQuery 提供了一个方法 .on() 来响应所选元素上的任何事件。这称为事件绑定。尽管 .on() 并不是事件绑定的唯一方法，但对于 jQuery 1.7+ 来说，使用它是一种最佳实践。要了解更多信息，阅读有关 jQuery 中事件绑定的演变的更多信息。

.on() 方法提供了多种有用的功能

link 示例

link 简单事件绑定

1
2
3
4
 
// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
$( "p" ).on( "click", function() {
    console.log( "<p> was clicked" );
});

link 多个事件，但只有一个事件处理程序

假设您希望在鼠标悬停或离开所选元素时触发相同的事件。最佳做法是使用“mouseenter mouseleave”。注意它与下一个示例之间的区别。

1
2
3
4
5
 
// When a user focuses on or changes any input element,
// we expect a console message bind to multiple events
$( "div" ).on( "mouseenter mouseleave", function() {
    console.log( "mouse hovered over or left a div" );
});

link 多个事件和处理程序

假设您希望在鼠标进入和离开元素时使用不同的事件处理程序。这比上一个示例更常见。例如，如果您想在悬停时显示和隐藏工具提示，则可以使用此方法。

.on() 接受一个包含多个事件和处理程序的对象。

1
2
3
4
5
6
7
8
9
10
11
 
$( "div" ).on({
    mouseenter: function() {
        console.log( "hovered over a div" );
    },
    mouseleave: function() {
        console.log( "mouse left a div" );
    },
    click: function() {
        console.log( "clicked on a div" );
    }
});

链接 事件对象

处理事件可能很棘手。通常，使用传递给事件处理程序的事件对象中包含的额外信息会有所帮助，以便更好地控制。要熟悉事件对象，请使用此代码在单击页面中的 <div> 后在浏览器控制台中对其进行检查。有关事件对象的细分，请参阅 事件处理函数内部。

1
2
3
4
 
$( "div" ).on( "click", function( event ) {
    console.log( "event object:" );
    console.dir( event );
});

链接 将数据传递给事件处理程序

您可以将自己的数据传递给事件对象。

1
2
3
4
5
 
$( "p" ).on( "click", {
    foo: "bar"
}, function( event ) {
    console.log( "event data: " + event.data.foo + " (should be 'bar')" );
});

链接 绑定事件到尚未存在的元素

这称为事件委托。这里有一个示例，仅供参考，但请参阅 事件委托 上的页面以获取完整说明。

1
2
3
 
$( "ul" ).on( "click", "li", function() {
    console.log( "Something in a <ul> was clicked, and we detected that it was an <li> element." );
});

链接 连接事件以仅运行一次

有时您需要特定处理程序仅运行一次 - 在此之后，您可能希望没有处理程序运行，或者您可能希望不同的处理程序运行。jQuery 提供了 .one() 方法来实现此目的。

1
2
3
4
5
6
7
 
// Switching handlers using the `.one()` method
$( "p" ).one( "click", function() {
    console.log( "You just clicked this for the first time!" );
    $( this ).click(function() {
        console.log( "You have clicked this before!" );
    });
});

如果需要在第一次单击元素时执行一些复杂的设置，但后续时间不需要执行，则 .one() 方法特别有用。

.one() 接受与 .on() 相同的参数，这意味着它支持将多个事件传递给一个或多个处理程序，传递自定义数据和事件委托。

链接 断开事件连接

尽管 jQuery 的所有乐趣都发生在 .on() 方法中，但如果您想成为一名负责任的开发人员，它的对应方法同样重要。当您不再需要时，.off() 会清除该事件绑定。具有大量事件绑定的复杂用户界面可能会降低浏览器性能，因此勤奋使用 .off() 方法是一种最佳实践，以确保您仅在需要时才拥有所需的事件绑定。

1
2
 
// Unbinding all click handlers on a selection
$( "p" ).off( "click" );
1
2
3
4
5
6
7
8
9
10
11
12
13
 
// Unbinding a particular click handler, using a reference to the function
var foo = function() {
    console.log( "foo" );
};
 
var bar = function() {
    console.log( "bar" );
};
 
$( "p" ).on( "click", foo ).on( "click", bar );
 
// foo will stay bound to the click event
$( "p" ).off( "click", bar );

链接 命名空间事件

对于复杂的应用程序和与他人共享的插件，对事件进行命名空间很有用，这样你就不会无意中断开你不知道或无法知道的事件。有关详细信息，请参阅事件命名空间。