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() 方法中绑定的多个事件都执行一次。