Bind () Event usage analysis in jquery

Source: Internet
Author: User
Tags bind closure

This article mainly introduced the jquery bind () event usage, the example analyzes the bind () event The function, the characteristic and the binding event use skill, needs the friend to be possible to refer to under

This example analyzes the use of bind () events in jquery. Share to everyone for your reference. The specific analysis is as follows:

Let's look at its definition first:


1 . bind (EventType [, EventData], Handler (EventObject))

. The main function of the bind () method is to provide the behavior of some event methods on the object to which it is bound. The significance of its three parameters in the interim is as follows:

EventType is a String type event type, which is the event you need to bind. These types can include the following: Blur, Focus, Focusin, focusout, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, M Ouseover, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error. Here's what you need to be aware of, here are the event methods in JavaScript, not jquery, the event methods in jquery have a "on" in front of JavaScript, such as Onclick,onblur and so on.

The EventData parameter is an optional parameter, but it is less used in peacetime. If this argument is provided, then we can pass some additional information to the event handler function. This parameter has a very good use, is to deal with the problems caused by closures. We'll give you an example later.

Handler is used to bind the number of processing, in fact, also is the callback function, processing data after the corresponding method.

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


1 2 3 4 5 6 7 8 <input id= "Btnfirst" type= "button" value= "click Me"/> <script> $ (function () {$ ("#BtnFirst"). Bind ("click", function () {alert ("Hello World");}); }) </script>

When you open the page, click the button "click Me" and the "Hello World" pops up. This is our simplest binding event. It's very simple.

2. Binding Multiple Events

We can bind multiple events with bind () (In fact, this is the very well-known chained programming in JQuery and LINQ). The main function of the implementation is when we click, Pop "Hello World", when leaving the button, display a div.


1 2 3 4 5 6 7 8 9 10 11 12-13 <div> <input id= "btnfirst" type= button "value=" click Me "/></div> <div id=" Testdiv "style=" width : 200px; height:200px; Display:none; "> </div> <script> $ (function () {$ (" #BtnFirst "). Bind (" click ", Function () {alert (" Hello World ");}). Bind ("Mouseout", function () {$ ("#TestDiv"). Show ("slow"); }) </script>

This code page is easy to understand when the button is clicked, a "Hello world" pops up, and when you leave, the div is displayed. In jquery, you can use "slow", "fast" and "normal", but you can also set the number of milliseconds associated with it.

Object of the 3.bind () event

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

This event object is usually a parameter that is not necessary and can be omitted, because when the event handler is bound, it is possible to know exactly what he should do when the trigger is triggered, and it is usually enough to get sufficient information. Sometimes, however, you need to get more information about the user's environment when the event is initialized.

Give an example of the jquery website above:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <style> p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;} p.over {background: #ccc;} span { color:red;} </style> <p>click or double Click here.</p> <span></span> <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 realize that when the user clicks on the P object, the current relative to the page is displayed in the Span tab, and here is the event. Pass the parameters in.

4.unbind () Event

Unbind ([Type],[data],handler) is a reverse operation of BIND () that deletes the bound event from each matching element. If there are no parameters, all bound events are deleted. You can unbind the custom event you registered with BIND (). If the event type is provided as a parameter, only the binding event of that type is deleted. If the handler function passed at binding is used as the second argument, only this particular event handler is deleted.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27-28 <body onclick= "Mybodyclick ()" > <div onclick= "myclickout ()" > <div onclick= "Myclickinner ()" > < Span id= "MySpan" >i Love jquery!! </span> </div> </div> <span id= "Loosefocus" > Lost focus </span> </body> <script> function Myclickout () {alert ("outer div");} function Myclickinner () {alert ("Inner div");} function Mybodyclick () {Ale RT ("Body click"); var foo = function () {alert ("I ' m span."); $ (function () {$ ("#MySpan"). Bind ("click", foo);}) $ (function () {$ ("#Lo Osefocus "). Unbind (" click ", foo); }) </script>

The code above is also well understood, when the user's mouse hovers over span, and then the span click event is canceled. So, in the end, it only pops up alert inside the body.

Finally, a simple understanding of the use of one () event, in fact, is the same with BIND, which is generated for binding events. One and bind are basically the same, different in the call JQuery.event.add, the registered event to handle the function of a small adjustment. One called JQuery.event.proxy to perform an agent incoming event handler function. When an event triggers a function that invokes this proxy, the event is removed from the cache before the registered event function is executed. Here is the closure of the application, through the closure of the FN registered event function reference.

Use rules:


1 One (TYPE,[DATA],FN)

Bind a one-time event handler for each matching element's specific event (like click). On each object, this event handler is only executed once. The other rules are the same as the bind () function. This event handler receives an event object that can be used to block the default behavior of the (browser). This event handler must return FALSE if you want to cancel the default behavior and prevent the event from bubbling.

By pasting the implementation of the respective code of BIND and one, reader can make a comparison slightly:

Implementation of the Bind () code:


1 2 3 4 5 6 Bind:function (type, data, fn) {return type = = "Unload"? (TYPE,DATA,FN): This.each (function () {//FN | | data, f n && data implements the data parameter dispensable jQuery.event.add (this, type, fn | | data, fn && data); }); }

Implementation of one () code:


1 2 3 4 5 6 7 8 9 10 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, actually want to paste a bubble event, because in the process of binding events, if the call inside the event may trigger the outside event, so give everyone a reference.

Here's a reference to the JavaScript event bubbling article: "JavaScript event bubbling Introduction and application."

In short, what is a bubbling event? In fact, the simple understanding is that it is also an event propagation, which broadcasts from the internal controls to the elements of the parent class and then up to the ancestor level.

Then bubble instance code:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24-25 <body onclick= "Mybodyclick ()" > <div onclick= "myclickout ()" > <div onclick= "Myclickinner ()" > < Span id= "MySpan" > I love jquery!! </span> </div> </div> </body> <script type= "Text/javascript" > Function myclickout () { Alert ("outer Div"); function Myclickinner () {alert ("Inner Div");} function Mybodyclick () {Alert ("body click"); $ (function () {$ ("#MySp An "). Bind (" click ", Function (event) {alert (" I ' m span "); event.stoppropagation (); </script>

I hope this article will help you with your jquery programming.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.