Events and animations in jquery-"Sharp jquery" (2nd edition) reading notes 2

Chapter 4th events and animations in jquery

JQuery the events in

1. Loading the DOM

$ (document). Ready (function () {

Write code ...

});

Can be simply written as:

$ (function () {

Write code ...

});

$ (document) the Ready () method is executed when all the DOM structures in the Web page have been drawn, possibly when the DOM element is associated with something (a slice) that is not loaded.

$ (document). The Ready () method can write more than one at a time, calling the $ (document). The prepare () method appends new behavior to the existing behavior, which executes sequentially in the order in which they are registered.

1. Event Bindings

After the document is loaded, if you intend to do something for the element binding event, you can use the bind () method to match the binding of the element for a particular event, the invocation format of the bind () method is:

Bind (Type [, data], FN);

The bind () method has 3 parameters, which are described below:

The 1th parameter is the event type, and the types are: blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, and error, of course, can also be custom names.

The 2nd parameter is an optional parameter, which is the extra data object passed to the event object as the value of the Event.data property.

The 3rd parameter is the handler function used to bind.

Events such as Click, MouseOver, and mouseout are often used in programs, and jquery provides a shorthand approach to this. Cases:

$ ("P"). Click (function () {

Alert (This). text ());

});

1. Synthetic events

jquery has two synthetic event--hover () methods and Toggle () methods, similar to the previous ready () method, and the hover () method and the toggle () method are all part of the jquery custom method.

The syntax structure of the hover () method is:

Hover (Enter,leave);

The hover method is used to simulate cursor hover events. When the cursor moves over an element, the specified 1th function (enter) is triggered, and the specified 2nd function (leave) is triggered when the cursor moves out of the element.

The syntax structure of the toggle () method is:

Toggle (fn1,fn2,,fnn);

The toggle () method simulates a mouse continuous click event. The 1th time the element is clicked, triggering the specified 1th function (FN1), and when the same element is clicked again, the specified 2nd function (fn2) is triggered, and if there are more functions, it is triggered sequentially until the last one. Each subsequent click repeats the carousel call to the several functions.

1. Event bubbling

Event Object

It is very simple to use event objects in your program, just add a parameter to the function, and the jquery code is as follows:

$ ("element"). Bind ("click", Function (event) {

//···

});

This allows the event object to be created when you click an element. This event object can only be accessed by the event handler function. The event object is destroyed when the event handler is finished executing.

Stop event bubbling

Stopping event bubbling can prevent the event handlers of other objects in the event from being executed. The Stoppropagation () method is provided in jquery to stop event bubbling.

Block default behavior

Elements in a Web page have their own default behavior, for example, when a hyperlink is clicked, the form is submitted after clicking the Submit button, and sometimes the default behavior of the element needs to be blocked.

In jquery, the Preventdefault () method is provided to block the default behavior of the element.

If you want to stop bubbling and the default behavior on the event object at the same time, you can return false in the event handler. This is a shorthand method for calling both the Stoppropagation () method and the Preventdefault () method at the same time on the event.

jquery does not support event capture, and if the reader needs to use event capture, use native JavaScript directly.

1. Properties of the Event object

The function of Event.type is to obtain the type of event;

Event. The function of the Preventdefault () method is to block the default event behavior;

The function of the Event.stoppropagation () method is to prevent the bubbling of events;

The function of Event.target is to obtain the element that triggers the event;

Event.relatedtarget

Event.relatedtarget

In the standard DOM, the elements that occur in mouseover and mouseout can be accessed through Event.target, and the related elements are accessed through Event.relatedtarget.

The role of Event.pagex and Event.pagey is to get the X-and y-coordinates of the cursor relative to the page. If there are scroll bars on the page, add the width or height of the scroll bars as well.

The role of Event.which is to get the left, middle, and right mouse buttons in a mouse click event, and to get the keyboard keys in keyboard events.

1= left mouse button; 2 = middle mouse button; 3 = right mouse button

Event.metakey getting <ctrl> keys for keyboard events

1. removing events

In the process of binding an event, you can bind more than one event to the same element, or you can bind multiple elements to the same event.

You can use the Unbind () method to remove a registered event on an element, its syntax structure:

Unbind ([Type],[data]);

The 1th parameter is the event type, and the 2nd parameter is the function to be removed, as specified below.

(1) If there are no parameters, all bound events are deleted.

(2) If the event type is supplied as a parameter, only the binding event of that type is deleted.

(3) If the handler function passed at bind time as the 2nd parameter, only this particular event handler will be deleted.

In addition, jquery provides a shorthand method--one () method for situations that require only one trigger and then immediately unbind.

The one () method can bind the handler function to an element. When the handler is triggered once, it is immediately deleted. That is, on each object, the event handler is executed only once.

The syntax structure of the one () method is as follows: one (type, [data], FN);

1. Simulation Events

In jquery, you can use the trigger () method to complete the simulation operation. Cases:

$ (' #btn '). Trigger ("click");

This allows the click event to be triggered when the user enters the page without requiring the user to actively click.

Trigger can trigger not only events with the same name supported by the browser, but also custom names.

The trigger (Type,[data]) method has two parameters, the 1th argument is the type of event to be fired, and the 2nd parameter is the additional data to pass to the event handler, passed as an array. You can usually tell the callback function by passing a parameter to distinguish whether the event was triggered by the code or triggered by the user.

The trigger () method executes the browser's default event after the event is triggered.

If you want to trigger only the bound focus event and do not want to perform a browser default action, you can use another similar method in jquery, the--triggerhandler () method.

JQuery the animation in

1. The show () method and the Hide () method are the most basic animation methods in jquery.

In an HTML document, calling the Hide () method for an element changes the display style of the element to "none".

When the element is hidden, you can use the show () method to set the display style of the element to the previous displayed state ("block" or "inline" or other value other than "none").

The show () method and the Hide () method, without any parameters, are equivalent to CSS ("display", "none/block/inline") to hide or display matching elements immediately, without any animation.

You can specify a speed parameter for the show () method if you want the element to appear slowly when you call the show () method.

The parameters can be the speed keyword "slow", "normal", and "fast" (lengths are 600 milliseconds, 400 milliseconds, and 200 milliseconds, respectively). In addition, you can specify a number for the display speed.

The show () method and the Hide () method simultaneously modify the element's multiple style properties, that is, height, width, and opacity.

Note: Animating with jquery is required in standard mode, otherwise it may cause animation jitter.

1. The FadeIn () method and the Fadeout () method only change the opacity of the element.

The FadeOut () method reduces the opacity of the element for a specified period of time until the element disappears completely ("Display:none"). The FadeIn () method is the opposite.

1. The Slideup () method and the Slidedown () method only change the height of the element.

If the display property value of an element is "none", the element will be displayed from top to bottom when the Slidedown () method is called. The Slideup () method is exactly the opposite, and the elements are hidden from bottom to top.

1. Custom animation Methods Animate ()

In many cases, you need to have more control over your animations, and you need to take some advanced custom animations to solve these problems. In jquery, you can use the animate () method to customize the animation. Its syntax structure is:

Animate (params, speed, callback);

The parameters are described as follows:

(1) Params: A mapping that contains style attributes and values, such as {property1: "value1", Property2: "value2",...}.

(2) Speed: Velocity parameter, optional.

(3) Callback: The function that executes when the animation completes, optional.

Note: The callback callback function applies to all of the jquery animation effects methods, such as the callback function of the Slidedown () method:

$ ("#element"). Slidedown ("normal", function () {

Do other things after the effect is done

});

1. Stop animation and determine whether it is in an animated state

(1) animate the Stop element

Many times you need to stop the animation that matches the elements in progress, and you need to use the Stop () method. The syntax structure of the Stop () method is: Stop ([clearqueue],[gotoend]);

The parameters Clearqueue and gotoend are optional parameters, which are Boolean values (True or false). Clearqueue represents whether to empty an unfinished animation queue, Gotoend represents whether the animation being executed is directly to the end state, usually for the latter animation to be based on the last state of the previous animation.

If you use the Stop () method directly, the animation that is currently in progress is stopped immediately, and the next animation starts in the current state if there is another animation waiting to continue.

(2) Determine if the element is in an animated state

When you use the Animate () method, you avoid animation accumulation and the animation is inconsistent with the user's behavior.

When a user quickly executes animate () animations on an element, an animation accumulation occurs. The workaround is to determine if the element is animated, and if the element is not animated, add a new animation for the element, otherwise it is not added. The code is as follows:

if (! $ (Element). Is (": Animated")) {//Determine if the element is in an animated state

Add a new animation if you are not currently animating

}

(3) Delay animation

During animation execution, you can use the delay () method if you want to delay the animation.

1. Other animation methods

jquery also has 4 animation methods that are designed to interact with each other.

The toggle (Speed,[callback]) method toggles the visible state of the element.

The Slidetoggle (Speed,[easing],[callback]) method Toggles the visibility of a matching element by a height change.

The FadeTo (Speed,opacity,[callback]) method adjusts the opacity of an element to the specified value in a progressive manner.

The Fodetoggle (Speed,[easing],[callback]) method Toggles the visibility of the matching element through an opacity change.

1. Animation queue

(1) animation effect on a set of elements

When multiple properties are applied in a animate () method, the animation occurs at the same time.

When the animation method is applied in a chained way, the animation occurs in order (unless the queue option value is false).

(2) animation effects on multiple sets of elements

By default, animations occur at the same time.

When the animation is applied in the form of a callback (including the animation's callback function and the queue () method's callback function), the animation occurs in the order of the callback.

In addition, in the animation method, note that other non-animation methods will queue, such as the CSS () method to make non-animated methods are also executed in order, you need to write these methods in the animation method callback function or queue () method.

Events and animations in jquery-"Sharp jquery" (2nd edition) reading notes 2