Usage analysis of Bind () events in JQuery _ jquery-PHP source code

This article mainly introduces the usage of Bind () events in JQuery, and analyzes the functions and features of Bind () events and the usage skills when binding events, you can refer to the next article to introduce the usage of Bind () events in JQuery. the instance analyzes the functions and features of Bind () events and the usage skills when binding events, for more information, see

This document analyzes the usage of Bind () events in JQuery. Share it with you for your reference. The specific analysis is as follows:

Let's take a look at its definition:

.bind( eventType [, eventData], handler(eventObject))

The main function of the. Bind () method is to provide the behavior of some event methods to the objects it binds. The meanings of the three parameters are as follows:

EventType is a string type event type, which is the event you need to bind. Such types can include: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. It should be noted that the event methods in javascript are used here, rather than in JQuery. the Event methods in JQuery all have an "on" option before JavaScript, such as onclick, onblur and so on.

The eventData parameter is an optional parameter, but it is usually used less. If this parameter is provided, we can pass some additional information to the event processing function. This parameter is useful in processing the problems caused by closures. We will give you an example later.

Handler is used to bind the processing number, which is actually the callback function. after processing the data, the corresponding method is used.

1. the first simple bind () event --- Hello Word

《script》$(function () { $("#BtnFirst").bind("click",function(){  alert("Hello World"); });})《script》

After the page is opened, Click "Click Me" to bring up "Hello World ". This is our simplest binding event. It's easy.

2. bind multiple events

We can bind multiple events through bind () (in fact, this is a very famous chain programming in JQuery and Linq ). The main function is to pop up "Hello World" when we click. when the button is left, a p is displayed.

《script》$(function () { $("#BtnFirst").bind("click", function () {  alert("Hello World"); }).bind("mouseout", function () {  $("#Testp").show("slow"); });})《script》

This code page is easy to understand, that is, when a button is clicked, a "Hello World" is displayed, and p is displayed when it leaves. You can use "slow", "fast", and "normal" for animations in JQuery. of course, you can also set the related milliseconds.

3. bind () Event object

The Handler callback function can accept a parameter. when this function is called, a JavaScript event object will be passed in as a parameter.

Here is an example on the official JQuery website:

Click or double click here.
《script》 $("p").bind("click", function(event){  var str = "( " + event.pageX + ", " + event.pageY + " )";  $("span").text("Click happened! " + str); }); $("p").bind("dblclick", function(){  $("span").text("Double-click happened in " + this.nodeName); }); $("p").bind("mouseenter mouseleave", function(event){  $(this).toggleClass("over"); });《script》

The main function here is to display the current coordinates relative to the page in the span tag when the user clicks p. The event is used here. Pass the parameters in.

4. unbind () event

Unbind ([type], [data], Handler) is a reverse operation of bind (). It deletes binding events from each matching element. If no parameter exists, all bound events are deleted. You can unbind custom events registered with bind. If the event type is provided as a parameter, only binding events of this type are deleted. If the handler passed during binding is used as the second parameter, only this specific event handler will be deleted.

 
  
I love JQuery !!
 
No focusScript function MyClickOut () {alert ("outer p");} function MyClickInner () {alert ("Inner p");} function MyBodyClick () {alert ("Body Click");} var foo = function () {alert ("I'm span. ") ;}$ (function () {$ (" # MySpan "). bind ("click", foo) ;}$ (function () {$ ("# LooseFocus "). unbind ("click", foo);}) script

The above code is also easy to understand, that is, when the user's mouse stays on the span, and then cancel the span click event. In the end, only the alert in the body is displayed.

Finally, let's take a brief look at the use of one () events. In fact, one and bind are the same, both generated to bind events. One is basically the same as bind. different calling jQuery. event. add makes a small adjustment to the registered event processing function. One calls jQuery. event. proxy to perform the event Processing function passed in by the proxy. When an event triggers a function to call this proxy, the event is deleted from the cache before the registered event function is executed. Here is the closure application. we can use the closure to get reference of the event function registered by fn.

Rules:

one(type,[data],fn)

Bind a one-time event handler function for a specific event (such as click) matching element. On each object, this event processing function is executed only once. Other rules are the same as those of the bind () function. This event handler receives an Event object, which can be used to prevent (browser) default behavior. If you want to cancel the default action and prevent event bubbles, the event handler function must return false.

Paste it, the implementation of bind and one code, you can make a comparison:

Bind () code implementation:

Bind: function (type, data, fn) {return type = "unload "? This. one (type, data, fn): this. each (function () {// fn | data, fn & data implement the data parameter dispensable jQuery. event. add (this, type, fn | data, fn & data );});}

Implementation of One () Code:

One: function (type, data, fn) {var one = jQuery. event. proxy (fn | data, function (event) {jQuery (this ). unbind (event, one); return (fn | data ). apply (this, arguments); // this-> current element}); return this. each (function () {jQuery. event. add (this, type, one, fn & data );});}

5. finally, I actually want to post a bubble event, because when handling binding events, calling internal events may trigger external events, so let's give it a reference.

Here, you can refer to the javascript event bubbling article: Introduction and application of JavaScript event bubbling.

In short, what is a bubble event? In fact, a simple understanding is that it can also be said to be event propagation. it broadcasts the elements of the parent class from the internal controls, and then continues to the ancestor-level elements.

Then the bubble instance code:

 
  
         I love JQuery!!