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 );
}