jQuery - 事件 - 概述 + 基础知识

jQuery 提供简单的方法来将事件处理函数绑定在被选择者上。当事件被触发，提供的函数会被执行。在该函数中，this 是指启动事件的 DOM 元素。详细文档：Events Documentation

事件处理函数可以接收事件对象，此对象可用于确定事件的性质，并且可以用来阻止事件的默认行为。详细文档：Event Object Documentation

jQuery 事件基础知识

设置 DOM 元素的事件响应

jQuery 可以简化在页面元素上设置事件驱动的响应。

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

$( "p" ).on( "click", function() {
    console.log( "click" );
});

将事件扩展到新页面元素上

.on() 方法只能给在设置事件时存在的元素添加事件监听器。在事件监听器创建之后创建的类似元素，不会自动的响应该事件监听器。

$( document ).ready(function(){
    // 在所有 button 元素上添加事件监听器
    $( "button.alert" ).on( "click", function() {
        console.log( "A button with the alert class was clicked!" );
    });
 
    // 现在创建新的类似的 button 元素，
    // 由于该元素是在事件创建之后新添加的，
    // 所以该 button 元素不会响应上方的事件
    $( "<button class='alert'>Alert!</button>" ).appendTo( document.body );
});

所以在给新添加的元素上绑定事件，要注意 .on() 方法的顺序。

事件处理函数内部

每个事件处理函数会收到一个事件对象，该对象包含许多属性和方法。该事件对象通常使用 .preventDefault() 方法来阻止事件的默认行为。

事件对象中其他有用的属性和方法：

pageX, pageY 事件触发时鼠标的位置，该位置是相对于页面显示区域的左上角来计算的(不是整个浏览器窗体)。

type 事件类型(例如：click)。

which 被点击的按钮或键盘。

data 事件绑定时被传入的数据。

// Event setup using the `.on()` method with data
$( "input" ).on(
    "change",
    { foo: "bar" }, // Associate data with event binding
    function( eventObject ) {
        console.log("An input value has changed! ", eventObject.data.foo);
    }
);

target 发起事件的 DOM 元素。

namespace 触发事件时指定的命名空间。

timeStamp 浏览器中事件发生时，相对于 1970-01-01 的时间差异值(单位：毫秒)。

preventDefault() 阻止事件的默认行为(例如：跳转链接)。

stopPropagation() 阻止事件冒泡到其他元素。除了事件对象，事件处理函数还可以通过 this 关键字访问处理程序绑定的 DOM 元素。通过 $(this) 这种方式将 DOM 元素转变为 jQuery 对象。

var element = $( this );

// 阻止特定样式的链接跳转
$( "a" ).click(function( eventObject ) {
    var elem = $( this );
    if ( elem.attr( "href" ).match( /evil/ ) ) {
        eventObject.preventDefault();
        elem.addClass( "evil" );
    }
});

设置多个事件响应

多个事件共享同一个事件处理程式，在 .on() 方法中用空格分隔符来分隔不同的事件名称。

// 多种事件，相同的处理程式
$( "input" ).on(
    "click change", // 为多个事件绑定处理程式
    function() {
        console.log( "An input was clicked or changed!" );
    }
);

当每个事件都拥有自己的事件处理程式时，可以将(键/值)对象传入 .on() 方法中，key 为事件名称，value 为事件处理函数。

// 绑定不同的事件处理函数，至不同的事件名称
$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

命名空间事件

对于复杂的应用程式或其他共享的插件，命名空间事件非常有用，这样就不会无意终端你没有的或者不了解的事件。

// 命名空间事件
$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // 解绑该命名空间中所有事件

拆除事件监听器

通过 .off() 方法和向该方法中传入事件类型的方式，移除事件监听器。

// 移除所有 click 事件
$( "p" ).off( "click" );

// 通过事件处理函数的参考，移除特定的时间处理函数
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
 
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar ); // foo 事件处理函数依然绑定在 click 事件上

将事件设置为仅执行一次

通过 .one() 方法来实现这种目的

// 使用 .one() 方法切换处理程序
$( "p" ).one( "click", firstClick );
 
function firstClick() {
    console.log( "You just clicked this for the first time!" );
 
    // 现在设置 click 事件的后续事件处理程序
    // 若不需要 click 事件的后续事件处理程序，可忽略此步骤
    $( this ).click( function() { console.log( "You have clicked this before!" ); } );
}

注意：上面的代码是指，首次点击每个 p 元素时，执行 firstClick 函数，而不是第一次点击任意的 p 元素，就从所有 p 元素中删除函数。

.one() 也可以绑定多个事件

$( "input[id]" ).one( "focus mouseover keydown", firstEvent);
 
function firstEvent( eventObject ) {
    console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}

上方代码中，firstEvent 程式会被 .one() 方法中绑定的多个事件都执行一次。