11-jquery Event binding and reconciliation

1. Binding Events

Grammar:

Bind (TYPE,DATA,FN)

Description: Binds an event handler function for each matching element's specific event (like click).

Parameter explanation:

type (String): Event Type

Data (Object): (optional) An additional data object that is passed to the event object as the value of the Event.data property

fn (function): The handler function above the event bound to each matching element

Example:

When each P tag is clicked, its text pops up

$ ("P"). Bind ("click", Function () {  alert (this). text ());});

You can pass some additional data before the event is processed.

function Handler (event) {//event.data can get the data alert (Event.data.foo) of the second parameter of the Bind () method  ;} $ ("P"). Bind ("click", {foo: "Bar"}, Handler)

Cancels the default behavior by returning false and prevents the event from bubbling.

$ ("form"). Bind ("Submit", function () {return false;})

Only the default behavior is canceled by using the Preventdefault () method.

$ ("form"). Bind ("Submit", function (event) {  event.preventdefault ();});

2. Unbind Event

Grammar:

Unbind (TYPE,FN);

Describe:

The reverse operation of BIND () removes the bound event from each matching element.

If there are no parameters, all bound events are deleted.

If you pass a handler function that is passed at bind time as the second argument, only that particular event handler will be deleted.

Parameter explanation:

type (String): (optional) event type

fn (Function): (optional) The event handler to be tied to the event of each matching element

Example:

Unbind all events in all paragraphs

$ ("P"). Unbind ()

Unbind the Click event of a paragraph

$ ("P"). Unbind ("click")

Removes a binding for a specific function, passing the function as the second argument

var foo = function () {  //Bind event handler for event handlers};$ ("P"). Bind ("Click MouseEnter", foo);//give P-paragraph bind click MouseEnter event $ ("P"). Unbind ("click", foo); Only the Click event with the P paragraph tag is unbound

3. Custom Events

In fact, the binding and reconciliation of events, are I prepare for the custom event (you memorize the events provided by jquery in mind), after the jquery is ripe, you can play a custom event

Grammar:

Trigger (Type,data);

Description: Triggers a class of events on each matched element that triggers a custom event registered by bind ().

Parameter explanation:

type (String): The type of event to trigger

Data (Array): (optional) Additional parameters passed to the event handler

Example:

Add a custom event to a button

$ (' button '). Bind (' Myclick ', function (ev,a,b) {    //Custom event Myclick Event} added to button buttons        )            

Then trigger the custom event via trigger ()

$ (' button '). Trigger (' Myclick ', [up])        

4. Supplementary one-time events

Grammar:

One (TYPE,DATA,FN)

Describe:

Binds a one-time event handler for each matching element's specific event (like click). On each object, this event handler function is only executed once. Other rules are the same as the bind () function

Parameter explanation:

type (String): Event Type

Data (Object): (optional) An additional data object that is passed to the event object as the value of the Event.data property

fn (function): The handler function above the event bound to each matching element

Example:
When all paragraphs are clicked for the first time, all their text is displayed.

$ ("P"). One ("click", Function () {//////Only when the first click is triggered, and clicking again does not trigger the  alert ($ (this). text ());});

11-jquery Event binding and reconciliation