Events and animations in jquery

I. Events in jquery

• Loading the DOM

Waiting for page loading to complete in JS typically uses the Window.onload method, whereas in jquery, the $ (document) method is used instead of the traditional window.onload method. There is a big difference between the two:

1. Timing of execution

The Window.onload method is to fully load all elements of a Web page (including the file associated with the element) into the browser before it can be executed. In query, the $ (document) method, where the DOM is loaded ready to manipulate and invoke the function it binds, may not have been downloaded for all elements in the page.

Sometimes the images we need are not loaded, and the image width we need may not be valid. This scenario can be used with the jquery load () method. The load () method binds a handler function in the onload of the element. If the handler is bound to a Window object, it is triggered after all content has been loaded. If the handler is bound on an element, it is triggered after the element content has been loaded.

$ (window). Load (function ({})) is equivalent to JS's Window.onload=function () {}

2. Multiple use

The Window.onload method can only be used once, otherwise the subsequent window.onload will overwrite the previous one. This is especially troubling when multiple JS are introduced, but the $ (document) in jquery. The ready () method appends new behavior to the existing behavior and executes sequentially in the order of registration.

3. Shorthand method

$ (document). The Ready () method can be abbreviated to $ (function () {}) or $ (). Ready (), which has been processed in the jquery source code, and their functionality is the same.

• Event Bindings

Use the bind () method to bind a specific event to a matching element.

The format is bind (type [. Data] FN);

The first parameter is an event type, including: Blur, focus, load, resize, scroll, unload, click, Dbclick, MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error, etc. You can also customize the name.

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

The third parameter is the handler used to bind the event.

1 $ (function () {2     $ (". Head"). Bind ("click", Function () {  //) Add a click event to the. Head element 3         var $content =$ (this). Next () ;     Defines a local variable to save $ (this). Next 4         if ($content. Is (": visible")) {        //implement click to display and click on hidden Toggle 5             $content. Hide (); 6         } else{7             $content. Show (), 8         } 9     }) 10});

Like Blur, focus, load, resize, scroll, unload, click, Dbclick, MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error, and other common events jquery provides shorthand, eg: $ (". Head"). MouseOver (Function ( ) {}). mouseout (function () {});

Other uses of the Ps:bind () method

1. Binding multiple Event types

1 $ (function () {2     $ ("div"). Bind ("mouseover mouseout", function () {3         $ (this). Toggleclass ("over"); 4     }); 5} );

2. Add event namespaces for easy administration

1 $ (function () {2     $ ("div"). Bind ("Mouseover.plugin", Function () {3         $ ("Body"). Append ("<p>mouseover event </p> "); 4     }); 5     $ ("div"). Bind ("Click.plugin", function () {6         $ ("Body"). Append ("<p>click event </p>"); 7     }); 8     $ ("div"). Click (function () {9         $ ("div"). Unbind (". Plugin");     11});

3. Same event name, different namespace execution methods

1 $ (function () {2     $ ("div"). Bind ("click", Function () {3         $ ("Body"). Append ("<p>click event </p>"); 4     }); 5     $ ("div"). Bind ("Click.plugin", function () {6         $ ("Body"). Append ("<p>click.plugin event </p>"); 7     }); 8     $ ("button"). Click (function () {9         $ ("div"). Trigger (". click!");    The function is to match all of the click methods that are not included in the namespace     ); 11});

• Synthetic events

1. Hover ()

The hover () method simulates the cursor hover effect, triggers the first function on the mouse pointer, and the second function is triggered by the mouse removal. Used to replace bind ("MouseEnter") and bind ("MouseLeave") in jquery.

format: hover (enter,leave);

The above code can be abbreviated by the hover () event:

1 $ (function () {2     $ (". Head"). Hover (function () {3         $ (this). Next (). Show (), 4     },function () {5         $ (this). Next (). Hide (); 6     }); 7});

The Ps:hover () method must pass in 2 functions, and there is an action function that does not have to be written.

2. Toggle ()

The toggle () method simulates a continuous Click event for the mouse. The first click triggers the first function, and the second click triggers the second function. If more functions are triggered in turn, then each click repeats the successive calls to the functions.

The Ps:toggle () method can also implement the visible state of the toggle element.

1 $ (function () {2     $ (". Head"). Toggle (function () {3          $ (this). Next (). Toggle (); 4      },function () {5          $ ( This). Next (). Toggle (); 6      }); 7  });

• Event bubbling and Event capture

When a page element triggers an event, the container and page of the element respond to the triggering event of the element in a particular order, and the order of events is called the process of the event. The event stream is divided into bubble type and capture type. The bubbling event stream is supported by all browsers, and it is triggered from a clear event source to an ambiguous event source in turn. Due to the existence of event streams, it is necessary to limit the scope of time. Capture-type event flow is not supported by all major browsers, it is an ambiguous event source to an explicit event source, which is then triggered down, which cannot be solved by JS, so jquery does not support event capture.

1. Event Object

JQuery Event object creation only needs to add a parameter to the function. The event object that is created can only be accessed by an event handler function. After the event is executed, the event object is destroyed.

1 $ ("element"). Bind ("click", Function (e) {    //e: Event object 2       //... 3});

2. Stop event bubbling

Use the Stoppropagation () method to stop event bubbling.

1 $ ("span"). BIND ("click", Function (e) {                     //e) is the Event object 2     var txt=$ ("#msg"). HTML () + <p> inner SPAN element click </p> "; 3     $ (" #msg "). HTML (TXT); 4     e.stoppropagation ();                                  Stop event bubbling 5});

3. Block default behavior

Blocks the default behavior of an element by Preventdefault ().

1 $ ("input"). Bind ("click", Function (e) {                     //e) is the Event object 2     var txt=$ ("#msg"). HTML () + <p> inner span element clicked </p > "; 3     $ (" #msg "). HTML (TXT); 4     e.preventdefault ();                                  Block event default behavior 5});

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 shorthand for calling both the Stopprapagation () method and the Preventdefault () method on the event object. E.preventdefault () can be changed to return false;

• Event Object Properties

1. E.type gets the type of the event.
2. The E.preventdefault () method blocks the browser's default behavior.
3. The E.stoppropagation () method blocks the bubbling of events.
4. E.target gets the element that triggered the event.
5. E.relatedtarget gets the related element.
6. E.pagex and Pagey get the X-and y-coordinates of the cursor relative to the page.
7. E.which Click the event to get the left, middle, and right mouse keys, keyboard events get keyboard keys.
8. Gets the CTRL key in the E.metakey keyboard event.

• removing events

Removes an event by using the Unbind () method.

Unbind ([Type],[data]);

The first parameter is the event type, and the second parameter is the function to be removed. If there are no parameters, all bound events are deleted. If the event type is supplied as a parameter, only the binding event of that type is deleted. If you pass a handler function passed as a second argument, only that particular event handler will be deleted.

1 $ ("P"). Click (function () {2      $ ("#btn"). Unbind (); 3});

You can use the one () method only if you want to trigger a subsequent removal of the binding immediately. The one () method can bind the handler function to an element. When the handler is triggered once, it is immediately deleted.

• Analog operation

1. Common simulation

Use the trigger () method to complete the simulation operation. Eg: $ ("#btn"). Trigger ("click"); can also be abbreviated to $ ("#btn"). Click ();

2. Triggering the custom event

1 $ (function () {2     $ ("div"). Bind ("Myclick", Function () {3         $ ("Body"). Append ("<p> My Custom Events </p>"); 4     }); 5     $ ("div"). Trigger ("Myclick"); 6});

3. Passing Data

The trigger (Type,[data]) method has two parameters, the first argument is the event type that is fired, and the second parameter is the additional data to pass to the event handler, as an array.

4. Perform the default action

The trigger () method executes the browser default action after the event is triggered. Use the Triggerhandler () method if you want to trigger only the binding event and do not want to perform a browser default action.

Second, the animation in jquery

• Type of animation

Method	Description
Hide () and show ()	Modify height width opacity at the same time
FadeIn () and fadeout ()	Change the Opacity
Slideup () and Slidedown ()	Change height
FadeTo ()	Change the Opacity
Toggle ()	Used instead of hide () and show ()
Slidetoggle ()	Used instead of Slideup () and Slidedown ()
Fadetoggle ()	Used instead of Fadein () and fadeout ()
Animate ()	Custom Animations The animation method is actually called inside of the animations above

• Stop animation

If you need to stop the animation somewhere, you need to use the Stop () method.

Stop ([clearqueue],[gotoend]);

Both Clearqueue and gotoend are optional parameters, which are Boolean values. Clearqueue is whether to empty the unfinished animation queue, gotoend whether to jump directly to the end state of the animation being executed.

• To determine whether an element is in an animated state

To avoid animations that result from an animation that is inconsistent with user behavior, first 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.

1 if (Element). Is (": Animated")) {   //determines if the element is in animated state 2           //If not animated, add a new animation 3}

• Delay animation

Delay the animation by using the delay () method. The delay () method can either postpone the execution of functions in the animation queue or be used for custom queues.

$ (this). Animate ({left: "400px"},3000)          . Delay (1000);

• Animation queue

When multiple properties are applied in a animate () method, the animation occurs at the same time. When the chained notation should be 0 with an animated method, the animation occurs sequentially (unless the queue option value is false).

Events and animations in jquery