At first, 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 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 the processing function that is used to bind, in fact also is the callback function, the corresponding method after processing the data.
Figure one: Bind parameter hints in jquery
1. The first simple bind () event---Hello Word
| The code is as follows |
Copy Code |
1 <input id= "Btnfirst" type= "button" value= "click Me"/>
JavaScript Code:
1 $ (function () {
2 $ ("#BtnFirst"). Bind ("click", Function () {
3 alert ("Hello World");
4 });
5 })
|
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.
| code is as follows |
copy code |
1 <div>
2 <input id=" Btnfirst "type=" button "value=" click Me "/>& Lt;/div>
3 <div id= "Testdiv" style= "width:200px; height:200px; display:none;"
4 </div> |
JavaScript Code:
| The code is as follows |
Copy Code |
1 $ (function () {
2 $ ("#BtnFirst"). Bind ("click", Function () {
3 alert ("Hello World");
4 }). bind ("Mouseout", function () {
5 $ ("#TestDiv"). Show ("slow");
6 });
7 }) |
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:
| The code is as follows |
Copy Code |
1 <style>
3 padding:5px;}
4 P.over {background: #ccc;}
5 span {color:red;}
6 </style> |
Html Code:
| code is as follows |
copy code |
1 <p>click or double click Here.</p>
2 <span></span> |
JavaScript Code:
| The code is as follows |
Copy Code |
1 <script>
2 $ ("P"). Bind ("click", Function (event) {
3 var str = "(" + Event.pagex + "," + Event.pagey + ")";
4 $ ("span"). Text ("click happened!" + str);
5});
6 $ ("P"). Bind ("DblClick", function () {
7 $ ("span"). Text ("Double-click happened in" + this.nodename);
8});
9 $ ("P"). Bind ("MouseEnter mouseleave", function (event) {
$ (this). Toggleclass ("over");
11});
</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
| code is as follows |
copy code |
<body onclick=" Mybodyclick () "
2 <div onclick=" Myclickout () ">
3 <div onclick= "Myclickinner ()"
4 <span id= "MySpan" >i love jquery!! </span>
5 </div
6 </div>
7 <span id= "Loosefocus" > Lost focus </span>
8 </body> |
JavaScript Code:
| code is as follows |
copy code |
1 function myclickout () {
2 alert ("Outer Div");
3}
4 function Myclickinner () {
5 alert ("Inner Div");
6}
7 function Mybodyclick () {
8 Alert ("Body click");
9}
Ten var foo = function () {
Alert ("I ' m span.");
12}
$ (function () {
$ ("#MySpan"). Bind ("click", foo);
$ (function () {
$ ("#LooseFocus"). Unbind ("click", foo);
|
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.
Working with rules: 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:
| The code is as follows |
Copy Code |
1 bi Nd:function (type, data, fn) {
2 return type = = "Unload"? This.one (Type, data, fn): This
3. each (function () {// fn | | Data, FN && data implements the data parameter optional
4 JQuery.event.add (this, type, fn | | data, fn && data);
5});
One () code implementation:
1 one:function (type, data, fn) {
2 var one = JQuery.event.proxy (fn | | data, function (event) {
3 jQuery (this). Unbind (event, one);
4 return (fn | |/data). Apply (this, arguments);/this-> the current element
5});
6 return This.each (function () {
7 jQuery.event.add (this, type, one, FN && data);
8});
9},
|
