Home > Developer > JavaScript
1 Event Type:2 1. Interface Events3 onload: Describes the document, picture, CSS has been frame,object loaded when the trigger, Window.onload4 window.onload = function () {5 //represent picture, Dom element, iframe,css after loading complete6 events triggered by//7 }8 $ (function () {9 //dom CSS JS initialization on load eventsTen //The Unload event that called the picture One }); A - onunload: Removing load events - onabort:xmlhttprequest the onerror: The document fails to load, the image fails to load when the event is called, XMLHttpRequest - request failure is a function called - onresize: Commonly used for Windows, Body,frameset to change window size when calling - onscroll: Event triggered by user scrolling document + OnContextMenu: Event triggered by right-click - 2. Spotlight Events + Blur: A Focus at Focusin - Focusout - 3. Form Events - onchange - onreset - onsubmit in onselect - 4. Mouse Events to onclick + Ondbclick - onmousedown the onmousemove * onmouseover $ onmouseupPanax Notoginseng OnMouseLeave - 5. Roller Events the Wheel + 6. Keyboard Events A onkeydown the onkeyup + onpress - 7. Touch-Screen Events $ Ontouchstart $ Ontouchchend - Ontouchmove - Ontouchleave the nested events in the 8.window,body - Onafterprint: The method is executed immediately when the document is printedWuyi Onbeforeprint: Execute event before printing the onpagehide: When the browser is about to leave the event - onpageshow: When the browser is about to immediately event Wu onbeforeunload: When the browser is about to immediately event - drag and Drop events About Ondrag $ ondragstart - Ondragend - OnDragEnter - Ondragleaveover A Document Events + onreadystatechange:xmlhttprequest the -Common use in javascript: AddEventListener for listening events
<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>Js</title> <Metaname= "keywords"content=""/> <Metaname= "description"content=""/> <styletype= "Text/css"> *{margin:0;padding:0;}Body{font-size:16px;font-family:"Microsoft Jas Black";Color:#666;background:#fff; }#box{font-size:64px;margin:100px Auto;} </style></Head><Body> <DivID= "box">Click Me</Div> <Scripttype= "Text/javascript"> /*There are two types of an element binding event: One property event and the dynamic binding event AddEventListener can be mutually compatible, the same event type being overwritten Addeventl Istener (event type, callback function, CP (TRUE/FALSE)) True: Event flapping false: Why does event bubbling recommend using bubbling instead of event flapping The default is bubble behavior block bubbling: event.stoppropagation (); Block default behavior: Event.preventdefault has the default behavior tag: A, input box, checkbox radio*/Window.addeventlistener ("Click",function() {Console.log ("Click events for Window"); },false); Document.addeventlistener ("Click",function() {Console.log ("Click event for document"); },false); Document.body.addEventListener ("Click",function() {Console.log ("body's Click event"); },false); Document.queryselector ("Div"). AddEventListener ("Click",function(e) {Console.log ("Div's Click event"); E.stoppropagation (); },false); </Script></Body></HTML>
What are JavaScript events? JavaScript Listener Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
