Examples of common events in jquery bind, hover, toggle, etc. _jquery

1.$ (document)-Ready ()

$ (document). Ready () is a typical way in jquery to respond to the onload events built into JavaScript and perform tasks. It has a similar effect to the onload. But there are some differences:

The Window.onload event is triggered when a document is completely downloaded to the browser. Using the $ (document). Ready () registered event handlers will run after the HTML download is complete and resolved to the DOM tree, but it does not mean that all associated files have been downloaded.

There is usually only one onload event handler in a page, and only one reference to a function is saved at a time, and $ (document). Ready () can have multiple.

Generally, $ (document). Ready () is better than using the OnLoad event handler. However, if the associated file has not yet been loaded, the call to a property similar to the height and width of the image can be problematic, so you need to choose the appropriate method at different times.

$ (document). Ready () has three kinds of writing, respectively:

$ (document). Ready (function () { 

//thisis the coding ... 

});


$ (). Ready (function () { 

//thisis the coding ... 

});


$ (function () { 

//thisis the coding ... 

});

2. Event Binding

Grammar

$ (selector). bind (Event,data,function)

Parameters and Descriptions:

Event: Required. Specify one or more events to add to the element. Separate multiple events by a space. Must be a valid event.

Data is optional. Specify additional data to be passed to the function.

function Required. Specify the function to run when an event occurs.

corresponding to Unbind (): Remove event

Eg: $ (' #idchoose '). Unbind ("click", Function_name)

Shorthand binding event: general preference for abbreviations

$ ("#dividelement"). Bind ("click", Function () {//do something}) is rewritten as:

$ ("#dividelement"). Click (function () {//do Something}

jquery binds the element by using the. bind () method to unbind the element by using the. Unbind () method. and the. Bind () method is capable of performing multiple bindings, and if there is no binding, it is safe to unbind.

Most of the time a certain event only needs to be triggered once, and then immediately unbind, in the traditional practice, we may be the first event binding, and then after the execution of the event to unbind. jquery provides us with a shorthand approach. One to specifically address the tedious code written in the above scenarios, examples are as follows:

$ (document). Ready (function () {

$ (' #swotcjer '). One (' click ', Togglestyleswitcher);

});

Incidentally, the benefit of binding events with BIND is that you can define custom events, and you can bind multiple events at once.

3. Synthetic Events

When you do event capture, you often need to capture the combined user actions and respond with multiple functions, which we call composite events.

The. Ready () method provided by jquery is one of the most commonly used conforming event methods, in addition to the two functions used for interactive processing:

. Hover (Enter,leave) a method that mimics a hover event (the mouse moves over an object and removes the object). This is a custom method that provides a "stay in" state for frequently used tasks.

$ (function () {

$ (' #panelh5. Head '). Hover (function () {

$ (this). Next (). Show ();

},function () {

$ (this ). Next (). Hide (); 

})

. Toggle (Fn1,fn2,.. FnN) Toggles the function to be invoked each time you click. Used to simulate a continuous mouse click event. Example:

$ (function () {

$ (' #panelh5. Head '). Toggle (function () {

$ (this). AddClass ("highlight");

$ (this). Next (), Show (),

},function () {

$ (this). Removeclass ("highlight");

$ (this). Next (). Hide ();

});

4. Event object and event bubbling

Event objects: Using Event objects in your program is simple, just add a parameter to the function, eg:

$ ("element"). Click (Function (event) {

//event: Event object

})

The event object is created when you click on the ' element ' element. This object is accessible only by the event handler function. When the event handler function completes, the event object is destroyed.

Event capture: A strategy that allows multiple elements to respond to events. In the event capture process, the event is first given to the outermost element and then to the more specific element. (Body->div->span)

Event bubbling: Another opposite strategy is called time bubbling, which, when an event occurs, is first sent to the most specific element, and the event bubbles up to a more general element after the element is given an opportunity to respond. Event bubbling can sometimes have side effects, resulting in unexpected behavior. (Span->div->body)

Three ways to block event bubbling

by calling the. Preventdefault () method, you can terminate an event before starting the default action.

Call Event.stoppropagation () stop event propagation

jquery provides a. Stoppropagation () method that you can use to completely block event bubbling.

5. Use the Event.tatget property to specify the event object

Event handlers in the event handler hold the Events object. The Event.tatget property holds the target element in which the event occurred. This attribute is specified in Domapi, but not implemented by all browsers. jquery makes the necessary extensions to this event object to be able to use this property in any browser. With. Target, you can determine the element in the DOM that receives the event first. Also, we know that this refers to the DOM element that handles the event.

Use the Event.tatget property to specify that the event object block event bubbling code is as follows:

$ (document). Ready (function () { 

$ (' Switcher '). Click (Function (event) {

if (event.target== this) 

{

$ ( ' Switcher.button '). Toggleclass (' hidden ');}}

;)

});

Other event object properties can refer to the introduction on the consortium.