Binding and unbinding of events (JQuery)

Multi-event binding for 1on ()

Previously learned mouse events, form events and keyboard events have a feature, is directly to the element binding a processing function, all such events are fast processing. Open source can actually be seen, all the shortcut events at the bottom of the processing is through an "on" method to achieve. The JQuery on () method is an officially recommended way to bind events.

Basic usage: . On (events, [selector], [data])

The most common way to bind a click event to an element is to compare the shortcut to the on method.

$ ("#elem"). Click (function () {})  //shortcut $ ("#elem"). On (' click ', Function () {})//on mode

The biggest difference is that on is a customizable event name, and of course not just how to keep looking down

Multiple events bound to the same function

$ ("#elem"). On ("MouseOver mouseout", function () {});

Separated by a space, passing different event names, you can bind multiple events at the same time

Multiple events bind different functions

$ ("#elem"). On ({    mouseover:function () {},      mouseout:function () {},});

Separated by a space, passing different event names, you can bind multiple events at the same time, each event executes its own callback method

Passing data to a handler

function greet (event) {  alert ("Hello" + event.data.name); Hello mu net}$ ("button"). On ("click", {  name: "Mu lesson Net"}, greet);

The second parameter (object) can be passed to the event handler when an event is triggered.

All of the above are basic usage of the On method

Advanced usage of 2on ()

For their own processing mechanism, there is not only an on method, but also based on the evolution of the live method (after 1.7 is removed), delegate method and so on. The underlying implementation of these methods is also the on method, which is based on the mechanism of another mechanism commissioned by on.

Delegation mechanism

. On (events, [selector], [data], Handler (EventObject))

A selector selector is provided in the second argument to On, which simply describes the next

Refer to the following 3-layer structure

<div class= "Left" >    <p class= "Aaron" >        <a> Target node </a>//Click on this element    </p></ Div>

Give the following code:

$ ("div"). On ("click", "P", FN)

Events are bound to the topmost div element, and when the user fires on the A element, the event will bubble up and will always bubble on the div element. If a second argument is provided, the event will trigger an event callback function when it encounters a selector-matching element in the process of bubbling upwards.

3 Unload event Off () method

• Event handlers that are bound by the. On ()
• Remove the binding through the off () method

Depending on the characteristics of the on binding event, the off method can also remove the event handler specified on the element by passing the corresponding combination of event name, namespace, selector, or handler function. When there are multiple filter parameters, only event handlers that exactly match those parameters will be removed

Binding 2 Events

$ ("Elem"). On ("MouseDown MouseUp", FN)

Delete an event

$ ("Elem"). Off ("MouseDown")

Delete all Events

$ ("Elem"). Off ("MouseDown MouseUp")

Shortcut to delete all events, there is no need to pass the event name, all events bound by the node are destroyed

$ ("Elem"). Off ()

Binding and unbinding of events (JQuery)