| BIND (type,[Data], FN)
Returned value: jquery
Overview
Bind an event handler for a specific event of each matching element.
The. BIND () method is the main method used to add behavior to the document. All JavaScript event objects, such
Focus, Mouseover, and resize can both be passed in as the type parameter.
Jquery also provides some simple ways to bind these standard event types, such as. Click () to simplify. Bind
('Click '). Blur, focus, focusin, focusout, load, resize, scroll,
Unload, click, dblclick, mousedown, mouseup, mousemove, Mouseover,
Mouseout, mouseenter, mouseleave, change, select, submit, keydown,
Keypress, keyup, error.
Any string used as the type parameter is legal; if a string is not a native JavaScript event
The event handler is bound to a custom event. These custom events will never be created
The browser is triggered, but can be manually triggered by using. Trigger () or. triggerhandler () in other code.
If the string of the type parameter contains a dot (.) character, this event is considered to have a namespace.
This dot character is used to separate the event and its namespace. For example, if you run. BIND ('click. name ',
Handler), the click in the string is the event type, and the string name is The namespace. Name
Space allows us to unbind or trigger certain types of events without triggering other events. Reference
Unbind () to obtain more information.
When an event is uploaded to an element, all the processing functions bound to the event above will be triggered. For example
If multiple event handler functions are registered, they are always triggered in the order of binding. When all bound event processing letters
After the execution is complete, the event continues to rise along the normal event bubble channel.
The basic usage of. BIND () is:
- $ ('# Foo'). BIND ('click', function (){
- Alert ('user clicked on "foo ."');
- });
Copy code
This Code enables the element with the ID of Foo to respond to the click event. After you click the element, a warning is displayed.
Dialog box.
Multiple events
Multiple event types can be bound in sequence. Each event type is separated by spaces:
- $ ('# Foo'). BIND ('mouseenter mouseleave', function (){
- $ (This). toggleclass ('entered ');
- });
Copy code
This Code allows a <Div id = "foo"> element (the class is not set to entered initially ).
When moving in, add entered to the class, and when the mouse moves out of this Div, remove this
Class value.
In jquery 1.4, we can also bind multiple event handlers at a time by passing in a ing pair:
- $ ('# Foo'). BIND ({
- Click: function (){
- // Do something on click
- },
- Mouseenter: function (){
- // Do something on mouseenter
- }
- });
Copy code
Event processing functions
The FN parameter accepts a callback function, as shown previously. Inside the event handler function, this indicates
The Dom element bound to this function. If you want to convert this element into a jquery object
This object can be passed into $ () and re-encapsulated. For example:
- $ ('# Foo'). BIND ('click', function (){
- Alert ($ (this). Text ());
- });
Copy code
After the code is executed, when the user clicks the element with the ID of Foo, its text content will appear in
Warning box.
Event object
The callback function of FN can also accept a parameter. When this function is called, a javascript task
The object is passed in as a parameter.
This event object is usually unnecessary and can be omitted, because when the event processing function is bound
You will be able to clearly understand what he should do during the trigger, and usually you will have enough information. However
In some cases, you need to obtain more information about the user environment during event initialization. Complete
Event object content (English ).
Returning false in the event processing function is equivalent to. preventdefault () on the execution event object ()
And. stoppropagation ().
You can use the event object in the event handler function as follows:
- $ (Document). Ready (function (){
- $ ('# Foo'). BIND ('click', function (event ){
- Alert ('the mouse cursor is ('
- + Event. pagex + ',' + event. Pagey + ')');
- });
- });
Copy code
Note: this parameter is added to an anonymous function. This Code allows you to click the element with the ID of foo
When the report mouse clicks, it is relative to the page coordinate.
Transfer event data
Optional, the second parameter data is rarely used. If this parameter is provided, we can add
The information is passed to the event processing function. This parameter is useful in processing the problems caused by closures. Ratio
For example, we have two Event Handlers pointing to the same internal variable:
- VaR message = 'spoon! ';
- $ ('# Foo'). BIND ('click', function (){
- Alert (Message );
- });
- Message = 'not in the face! ';
- $ ('# Bar'). BIND ('click', function (){
- Alert (Message );
- });
Copy code
Because both functions have messages in their respective environments, the messages displayed during triggering are not
In the face! . The variable value is changed. To avoid this problem, we can use the message variable
Data parameters are passed in:
- VaR message = 'spoon! ';
- $ ('# Foo'). BIND ('click', {MSG: Message}, function (event ){
- Alert (event. Data. msg );
- });
- Message = 'not in the face! ';
- $ ('# Bar'). BIND ('click', {MSG: Message}, function (event ){
- Alert (event. Data. msg );
- });
Copy code
In this case, the function no longer directly points to this variable. Instead, it is passed to the data parameter by value.
Maintain the value when binding events. The first function will now display Spoon !, The second one is not in
Face!
Note: If this object is passed to the function by reference, it will make the situation extremely complex.
In addition, you can refer to the. Trigger () method to learn how to transmit data when an event is triggered, rather than when the event is bound.
Data transmission.
In jquery 1.4, data and events cannot be appended to an object, embed, or applet.
Above. This is because a severe error warning is triggered when data is appended to a Java Applet element.
Parameters
Type: String
A string containing one or more event types, such as "click" or "Submit", or a Custom Event name.
Data(Optional) bject
Extra data object passed to the event object as the event. Data Attribute Value
FN: Function
The processing function bound to the event of each Matching Element
|
