【jQuery】jQuery官方基本教程的学习笔记2-事件Events

Events ，详细教程http://api.jquery.com/category/events/

一、jQuery Event Basics jQ基本事件

1.给DOM元素设置响应事件方法

.click()，.blur()，.change()，.focus()............................. ，也可简便的使用on

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

2.给新页面的元素设置事件---on

只会给已存在的元素才能设置到监听事件

$( 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 class='alert'>Alert!</button>" ).appendTo( document.body );
});

3.Inside the Event Handler Function --事件函数的内部

1）.事件内部有很多属性，例如.preventDefault()阻止默认的响应

（1）.pageX,pageY

（2）.type

（3）.which

（4）.data

（5）.target

（6）.namespace

（7）.timeStamp

（8）.preventDefault()

（9）.stopPropagation()

2）.DOM元素对象转jQuery对象，通过this关键字

var element = $( this );

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

4.设置多个事件响应

1）.如果多个事件的响应相同，可以通过.on()方法，事件类型之间用空格

$( "input" ).on(
    "click change", // Bind handlers for multiple events
    function() {
        console.log( "An input was clicked or changed!" );
    }
);

2).如果有多个事件，每个事件不同，即用键值对的形式。

$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

5.命名空间事件

在复杂的程序和写插件有用

$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // Unbin

6.解除事件绑定 .off()

// Tearing down all click handlers on a selection
$( "p" ).off( "click" );
// 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

7.设置事件只运行一次 .one()

1）.one()方法

// Switching handlers using the `.one()` method
$( "p" ).one( "click", firstClick );//所有的p都有一次点击机会，而不是一个点击了，其他没有的点击事件了
 
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!" ); } );
}

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

二、Event Helpers帮助函数

1.hover()

$("button.alert").hover(function(){
		$( this ).toggleClass( "hover" );
		console.log("button ");
	})

三、Triggering Event Handlers

1.trigger() 不可以模拟浏览器原生事件

2.trigger() 和.triggerhandler()

四、自定义事件

五、jQ事件扩展