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