[DOM Event Learning] Section 3 jQuery Event processing Basics on (), off () and one () methods, domjquery

[DOM Event Learning] Section 3 jQuery Event processing Basics on (), off () and one () methods, domjquery
[DOM Event Learning] Section 3 jQuery Event processing Basics on (), off () and one () methods use jQuery to provide a simple method to the selector (corresponding to the elements on the page) event handlers ). when an event occurs, the provided function is executed. In the method, this indicates the current element. these events are usually triggered by interactions between users and pages, such as text input to form elements and mouse pointer movement. there are also some situations, such as page load And unload events, which are triggered by the browser itself. for details about Events, you can view: http://api.jquery.com/category/events/ event processing method can receive an event object, this object is used to determine the event type, or stop default behavior. for more information about event objects, see: http://api.jquery.com/category/events/event-object/JQuery event binding methodJQuery provides convenient methods for most browser events, such as. click (),. focus (),. blur (),. change (), and so on.. On ()For example, the following two methods have the same effect:

// 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 () method. the on () method is flexible and useful in many cases. For example, if you want to bind the same processing method to multiple events, when you want to transmit data to the processing method or process custom events, or when you want to pass multiple events and methods. When binding multiple events to the same processing method, use spaces to separate event names:

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

 

You can bind multiple events at a time if they are handled differently, because the. on () method can receive PlainObjectObject, where one or more key values, key is the event name, and value is the processing function.

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

 

However, note that The. on () method can only bind events to existing elements.. If an element that matches the selector is created after the. on () method is executed, the newly created element will not execute the event processing method bound to it.

$(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 objectEach Event processing function receives an Event Object, which contains many attributes and methods. A common method is to use. preventDefault () to prevent the default action of the event. other useful attributes and methods include pageX and pageY: The cursor position when an event occurs. relative to the upper left corner of the area displayed on the page, rather than the browser window. type: event type, such as "click ". which: The clicked button or key. data: The data imported when the event is bound. for example:

// 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: Initialize the DOM element of the event, that is, the element that distributes the event. namespace: The namespace specified when this event is triggered. timeStamp: The timeStamp from January 1, January 1, 1970 when an event occurs. The unit is milliseconds. preventDefault (): block the default action of the event. stopPropagation (): prevents events from bubbling up to other elements. when these two methods are used together, they can be replaced by return false, which is more concise. the originalEvent attribute is an event object created by the browser. jQuery encapsulates this object and provides some useful methods and attributes, which are useful when processing touch events of mobile devices. in addition to the event object, the event processing function can also use ThisKeyword to access the DOM element bound to this event. We can Convert this DOM element to a jQuery object:

var $element = $(this);

 

Release event listenerTo remove the event listener, you can use . Off ()Method to pass in the event type to be unbound. if you attach a function with a name, you can use the second parameter to specify the event handler function with only this name removed.

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

Set the event to be executed only once. Sometimes you need a handler to execute only once, or you want to execute it once and then change it to another handler. jQuery provides . One ()Method.

// 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!");    });}

Note that in the above Code, the firstClick method will be executed once when all p elements are clicked for the first time, instead of removing the method from all p after a p is clicked .. the one () method can also be used to bind multiple events:

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

In this case, the first execution of all events enters this processing method. for this piece of code, that is, even if the input has obtained the focus, this method will still be executed during the first keydown event. references 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 reference manual Events: http://www.w3school.com.cn/jquery/jquery_ref_events.asp JavaScript Event Reference Manual: http://www.w3school.com.cn/jsref/jsref_events.asp JavaScript Event Response: http://chajn.org/project/javascript-events-responding-user/