jQuery 学习笔记 事件基础

jQuery Event Basics

Setting Up Event Responses on DOM Elements

jQuery使得在页面元素上设置事件驱动响应便得十分简单。

当用户与网页交互的时候，这些事件很容易被触发。例如，在表单中的输入框键入数据，或者鼠标移动等等。

在另外一些场景，如当页面被加载或取消加载时，浏览器也会触发一些事件。

 

jQuery为大部分浏览器提供了简单的方法，包括:.click(),.foucs(),.blur(), .change()等等，这些都是.on()方法的简写

在绑定相同的处理函数来操作元素时，当想要向处理函数提供数据时，当使用自定义事件时，当传递一个事件对象或处理程序时，

on方法是非常有用的。

• 使用简单的方法来设置

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

• 使用on方法来设置

$( "p" ).on( "click", function() {
    console.log( "click" );
});

Extending Events to New Page Elements

需要特别注意的是，.on()仅仅可以对已有的元素添加事件处理，在事件处理函数被建立后，再产生的元素不会自动添加事件处理函数

例如

$( document ).ready(function(){
  
    $( "button.alert" ).on( "click", function() {
        console.log( "A button with the alert class was clicked!" );
    });
 
    $( "button" ).addClass( "alert" ).appendTo( document.body );
});

Inside the Event Handler Function

每一个事件处理函数都会接受到一个包含许多属性和方法的事件对象。这个对象最常用的功能就是通过.preventDefault()方法来阻止默认的事件行为。

不过，该对象还包括其他的属性和方法：

pageX, pageY

事件发生时鼠标相对于左上角的位置

type 

事件的类型如click

which

被按下的button或key

data

任何被传递到事件的数据

target

触发事件的DOM元素

namespace

事件被触发时的命名空间

timeStamp

事件触发的事件和1970 1 1 相隔的时间

preventDefault()

阻止默认的事件行为

stopPropagation()

阻止事件的传播

出了事件对象，处理函数也可以通过this来获得DOM元素。为了将DOM元素转换为jQuery对象我们可以使用

var $this = $( this );

完整的例子如下

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

Setting Up Multiple Event Responses

为了给一个元素添加多个事件，可以用空格隔开

$( "input" ).on(
    "click change", 
    function() {
        console.log( "An input was clicked or changed!" )
    }
);

如果想为每一个事件添加一个处理函数，则可以使用键值对的形式

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

Namespacing Events

使用命名空间可以避免为元素添加不知道的，或不想使用的事件

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

Tearing Down Event Listeners

解除事件绑定，可以使用off方法

$( "p" ).off( "click" );

Setting Up Events to Run Only Once

如果你只想让事件触发一次可以使用one方法

$("p").one("mouseover",function(){
            window.alert("just once");
        });

注意上面的代码片段，会让说有的p元素触发一次mouseover事件，而不是只运行一次

.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方法会为每一个事件执行一次。