[DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用

 

　　jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件处理器(event handlers).

　　当一个事件发生,提供的function就被执行,在方法里面,this代表当前的元素.

　　这些事件通常是由于用户和页面的交互而被激发,比如文字输入到表单元素,鼠标指针移动等.也有一些情况,比如页面load和unload的事件,是由浏览器本身来激发.

　　关于Events的细节,可以查看:http://api.jquery.com/category/events/

　　事件处理方法可以接收一个event对象,这个对象被用来判定事件类型,或者制止默认行为等.

　　event对象的详细介绍可以参见:http://api.jquery.com/category/events/event-object/

 

jQuery的事件绑定方法

　　jQuery为绝大多数浏览器事件提供了方便的方法,比如.click(), .focus(), .blur(), .change()等,它们都是.on()方法的简便形式.

　　比如下面两个方法的效果是一样的:

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

 

.on()方法

　　.on()方法使用起来很灵活,在很多场合很有用,比如为多个事件绑定同一个处理方法,当你想给处理方法传数据,或者处理自定义事件,或当你想要传递多个事件和方法时.

 

　　为多个事件绑定同一个处理方法时,用空格分隔事件名:

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

 

　　如果多个事件的处理方法不同,也可以一次绑定,因为.on()方法可以接收传入一个大括号包含的PlainObject对象,其中是一个或多个key value,key是事件名,value是处理函数.

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

 

　　但是需要注意的是.on()方法只能对当前存在的元素绑定事件.

　　如果在.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);
});

 

事件对象

　　每一个事件处理函数都接收一个事件对象(Event Object),这个对象包含很多属性和方法.

　　一个很常用的方法是用.preventDefault()来阻止事件的默认行为.

　　其他有用的属性和方法包括:

　　pageX, pageY: 事件发生时的鼠标指针位置.相对于页面显示区域的左上角,而不是浏览器窗口.

　　type: 事件类型,比如”click”.

　　which: 被点击的button或key.

　　data: 事件被绑定的时候传入的数据.比如:

// Event setup using the `.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: 初始化这个事件的DOM元素,也即分发这个事件的元素.

　　namespace: 这个事件激发时指定的namespace.

　　timeStamp: 事件发生时距离1970年1月1日的时间戳,单位是milliseconds.

 

　　preventDefault(): 阻止事件的默认行为.

　　stopPropagation(): 阻止事件向上冒泡到其他元素.

　　这两个方法一起用的时候,可以用return false来代替,更加简洁.

 

　　originalEvent属性是浏览器自己创造的一个event对象,jQuery又包装了一下这个对象,有一些有用的方法和属性,这些在处理移动设备的touch events的时候很有用.

 

　　除了事件对象之外,事件处理函数还可以通过this关键字访问该事件绑定的DOM元素,我们可以把这个DOM元素转换为jQuery对象:

var $element = $(this);

解除事件监听器

　　要解除event listener,可以使用.off()方法,传入要解除绑定的事件类型.

　　如果你附加了一个有名字的function,那么你可以通过第二个参数,指定仅解除这个名字的事件处理函数.

// 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

 

 

设置只执行一次的事件处理

　　有时候你需要一个handler只执行一次,或者你想执行一次之后换一个handler, jQuery为这种情况提供了.one()方法.

// Switching handlers using the `.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!");
    });
}

　　注意上面这段代码中,这个firstClick方法将在所有p元素第一次被点击的时候执行一次,而不是某个p被点击一次之后就从所有p中移除该方法.

 

　　.one()方法也可以用来绑定多个事件:

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

　　这种情况下,所有事件的第一次执行都会进入这个处理方法.

　　对这段代码来说,也即,即便input已经获得了焦点,但是第一次keydown事件的时候还是会执行这个方法.

 

 

参考资料

　　jQuery Events: http://learn.jquery.com/events/

　　jQuery API Events: http://api.jquery.com/category/events/

　　Event Object: http://api.jquery.com/category/events/event-object/

　　Mozilla doc Events: https://developer.mozilla.org/en-US/docs/Web/Events

 

　　w3school jQuery参考手册 事件: http://www.w3school.com.cn/jquery/jquery_ref_events.asp

　　JavaScript事件参考手册: http://www.w3school.com.cn/jsref/jsref_events.asp

　　JavaScript事件响应:http://chajn.org/project/javascript-events-responding-user/