jquery Foundation Events

Source: Internet
Author: User

JQuery Events
1.ready ()-Similar to the role of window.onload
* notation
*$ (document). Ready (function () {});
*$ (). Ready (function () {});
*$ (function () {});
* The difference between ready and onload
* Ready
* with Shorthand method
* Allow multiple in an HTML page
* Wait for all DOM structures in the HTML page to load and execute
* OnLoad
* No Shorthand method
* In an HTML page only one
* You must wait for all content in the HTML page to complete before you can execute

1    //Example2$ (document). Ready (function(){3Console.log ($ ("#user"). Val ());4     });5 6     //jquery-undefined-a relatively sophisticated event handling mechanism7     var$user = $ ("#user");8Console.log ($user. Val ());//empty element Call method does not error, return undefined9 Ten     //DOM-Error dom empty element Call method property Error One     varuser = document.getElementById ("User11"); A     if(user) { - Console.log (user.value); -}Else{ theConsole.log ("Undefined"); -}
View Code
1 //the difference between event-ready and onload in jquery (nearly 6 milliseconds apart)2     varStartTime =NewDate (). GetTime ();3$(function(){4         varEndTime1 =NewDate (). GetTime ();5Console.log ("Ready Execution Time:" + (Endtime1-starttime) + "MS");6     });7Window.onload =function(){8         varEndTime2 =NewDate (). GetTime ();9Console.log ("OnLoad Execution Time:" + (Endtime2-starttime) + "MS");Ten}
View Code

2. Event binding and Unbinding
* BIND (TYPE,DATA,FN)-bind event
* Type-Specifies the event name of the binding
* If multiple events are bound, use spaces to separate them
* Data-optional, additional data object that is passed to the event object as the value of the Event.data property
* FN-handler function for binding event
* UNBIND ()-Unbind event
* Type-Specifies the name of the event to unbind
* No content is passed by default-unbind all Events
* Specify single event name-Unbind individual events
* Specify multiple event names-Unbind multiple events
* What events are allowed to be specified for binding and unbinding?
Blur, Focus, Focusin, focusout, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, M Ouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error.
* Note
* The so-called Click () event is a shorthand for bind (' click ')

1     /*2 * BIND (TYPE,DATA,FN) Method-Event binding3 * * Type-Sets the event name of the binding, string type.4 * * Data-optional, additional data object to be passed as Event.data property value to the event object5 * * fn-event corresponding processing function6      */7$ (". D1"). Bind ("click",function(){8         if($ (". D2"). Is (": Hidden")){9$ (". D2"). Show (3000);Ten}Else{ One$ (". D2"). Hide (3000); A         } -     }); -     //Multi-Event binding the$ (". D1>h3"). Bind ("MouseOver mouseout",function(){ -         if($ (". D2"). Is (": Hidden")){ -$ (". D2"). Show (1000); -}Else{ +$ (". D2"). Hide (1000); -         } +     }); A     /* at * UNBIND ()-Unbind event -      */ -$ (". D1"). Unbind ();//Unbind All Events -     //Unbind a specified event -$ (". D1>h3"). Unbind ("MouseOver mouseout");
View Code

3. Event Object
* Event object is encapsulated in parameters of the handler function corresponding to the event
Ele.onclick = function (event) {
Event
}
* Common usage
* pagex/clientx/offsetx/x-current x Axis
* page y/clienty/offsety/y-Current Y-Axis
* Target-source object (element) of the current binding event
* returnvalue-return value, Boolean type
* return false-resistance  Default behavior of the page
* which/keycode/charcode-keyboard corresponding value
4. Event bubbling
* Capture
* bubbling
5. Simulation Events (Learn)
* Trigger ()

1     $ ("button"). Click (function(event,a,b) {2        console.log (event.target); 3         Console.log ("A:" +a); 4         Console.log ("B:" +B); 5     }). Trigger ("Click", [' this was a. ', ' this is B. '); // trigger automatically triggers the same name event
View Code

6. Event switching
* Hover (Over,out) method
* Handling function of the Over-onmouseover event
* Handling function of the Out-onmouseout event
7.DOM Event Review
* Native DOM bound events three kinds
* Specify event names in HTML page elements
* in JavaScript code
* Element.onclick = function () {}
* Element.addeventlistener ("click", Function () {});

jquery Foundation Events

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.