Usage Analysis of Bind () Events in JQuery

Usage Analysis of Bind () Events in JQuery

This article mainly introduces the usage of Bind () Events in JQuery. The instance analyzes the functions, features, and usage skills of Bind () 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:

?

1	. 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

?

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>

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 we leave the button, a div is displayed.

?

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, that is, when the button is clicked, a "Hello World" is displayed, and the div 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.

This event object is usually unnecessary and can be omitted, because when the event processing function is bound, it can clearly know what it should do when it is triggered, generally, sufficient information is available. However, in some cases, you need to obtain