jquery学习手记（9）事件基础知识

1. jquery事件机制提供了两个事件相关的帮助函数：

$.fn.hover 提供一个或者两个传入函数参数

// The hover helper function
$( "#menu li" ).hover(function() {
$( this ).toggleClass( "hover" );
});

$.fn.toggle 提供两个及以上的传入函数参数

// The toggle helper function
$( "p.expander" ).toggle( function() {
$( this ).prev().addClass( "open" );
}, function() {
$( this ).prev().removeClass( "open" );
});

2. jquery对象基础

2.1 jquery提供了许多便利的事件方法，如：

$.fn.click

,

$.fn.focus

,

$.fn.blur

,

$.fn.change等等，它们都是$.fn.on的快捷方式。

// Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});

// Equivalent event setup using the `$.fn.on` method
$( "p" ).on( "click", function() {
console.log( "click" );
});

2.2 对页面新增元素的事件处理：

$( document ).ready(function(){
// Sets up click behavior on all button elements with the alert class
// that exist in the DOM when the instruction was executed
$( "button.alert" ).on( "click", function() {
console.log( "A button with the alert class was clicked!" );
});
// Now create a new button element with the alert class. This button
// was created after the click listeners were applied above, so it
// will not have the same click behavior as its peers
$( "button" ).addClass( "alert" ).appendTo( document.body );
});

2.3 深入理解事件处理函数内部：

pageX, pageY：相对显示页面位置

type ：事件类型

which：操作的按钮或者键盘的key

data：

// Event setup using the `$.fn.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：目标对象

namespace：命名空间

timeStamp：时间戳

preventDefault()：阻止默认事件发生

stopPropagation()：阻止关联事件发生

关键词：this

// Preventing a link from being followed
$( "a" ).click(function( eventObject ) {
var $this = $( this );
if ( $this.attr( "href" ).match( /evil/ ) ) {
eventObject.preventDefault();
$this.addClass( "evil" );
}
});

2.4 多重事件

一对多

// Multiple events, same handler
$( "input" ).on(
"click change",  // bind listeners for multiple events
function() {
console.log( "An input was clicked or changed!" )
}
);

多对多

// Binding multiple events with different handlers
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});

2.5 命名空间事件

// Namespacing events
$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // unbind all events in the namespace

2.6 销毁事件监听器

$.fn.off

// Tearing down 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 );
$( "p" ).off( "click", bar ); // foo is still bound to the click event

2.7 只允许一次的事件$.fn.one

// Switching handlers using the `$.fn.one` method
$( "p" ).one( "click", firstClick );

function firstClick() {
console.log( "You just clicked this for the first time!" );
// Now set up the new handler for subsequent clicks;
// omit this step if no further click responses are needed
$( this ).click( function() { console.log( "You have clicked this before!" ); } );
}

$.fn.one也可以绑定多事件

// Using $.fn.one to bind several events
$( "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 );
}