Talking about JavaScript events (event types)

There are many types of events that can occur in a Web browser, and different event types have different event information. The types of events at the DOM3 level mainly include: UI events, triggers when the user interacts with elements on the page, focus events, elements getting or losing focus triggers, mouse events, triggering when the user performs actions on the page by mouse, wheel events, triggering when using the mouse wheel, text events, triggering when text is entered in the document , keyboard events, the user through the keyboard to operate on the page, composite events, when input characters for the IME trigger, change events, the underlying DOM structure changes when triggered.

• UI Events

The triggering of a UI event is not necessarily triggered by a user action, including: load, triggering the event on a window after the page is fully loaded, triggering when all frames are loaded, triggering on IMG When the picture is loaded, triggering on an object when the embedded element is loaded. The Unload event, when the page is completely unloaded, fires on the window when all the frames are unloaded, fires on the frameset when the embedded content is unloaded, and the abort event, when the user stops the download process, if the embedded content is not loaded complete, The error event, which is triggered when a JavaScript script error occurs, fires on an IMG element when the image cannot be loaded, fires on an object when the embedded content cannot be loaded, fires when the framework fails to load; Select event, Triggered when the user selects the contents of the text box; The Resize event is triggered when the browser window size changes, and the scroll event is triggered when the user scrolls the element with the scrollbar.

1 eventutil.addevent (window, "load",function() {2                 Console.log ( document.getElementById ("AA"). InnerHTML);//2223             });

The above code adds the Load event, which is triggered when the page is loaded. Using the Load event ensures that the event is triggered after the page element is loaded and does not live with an error. If we were to get the elements on the page after the page element bit was loaded, an error would be generated.

　　

1 var img=document.getelementbyid ("Imgtest"); 2             Eventutil.addevent (IMG, "load",function(event) {3                 event=eventutil.getevent (event) ; 4                  Console.log (EVENT.CURRENTTARGET.SRC); 5             });

The above code triggers the Load event after the IMG image is loaded, and in the Load event, we get the event object, and through the properties of the event object Currenttarget the element of the event handler operation.

1 var sc = document.createelement ("script"); 2             Sc.src= "Js/checkboxdemo.js"; 3             Eventutil.addevent (SC, "load",function(event) {4                 console.log ("Loaded"); 5             }); 6             Document.head.appendChild (SC);

The above code dynamically adds a script file to the head and binds the load event.

The Unload event is an event that is opposed to the Load event, which is triggered after a complete uninstallation. This event is triggered when a user switches from one page to another. It is important to note that DOM elements cannot be manipulated in the Unload event, because all page elements do not exist when the Unload event executes.

The Resize event is triggered when the browser size changes.

1 eventutil.addevent (window, "resize",function(event) {2                 alert ("Resize") ); 3             });

It is important to note that you should not add a lot of calculation code to the resize, because the Resize event will be triggered frequently when the browser window changes, which will affect the performance of the browser.

• Focus Event

The focus event is triggered when the page gets or loses focus. With these events, and in conjunction with the Document.hasfocus () method and the Document.activeelement property, you can know the behavior of the user on the page. There are 6 focus events: The Blur event, which triggers the event when the element loses focus, does not bubble, the focus event, the element is triggered when the focus is focused, does not bubble, the Focusin event is triggered when the element gets focus, it bubbles, and the Focusout event, which is triggered when the element loses focus, bubbles. When the user moves from one element to another on the page, the order in which the event is triggered is: The Focusout event, triggered on the element that loses focus, the Focusin event, which is triggered on the element that gets focus, the blur event, which is triggered on the element that loses focus; Fires on the element that gets the focus.

• Mouse and Wheel Events　　

Mouse events are the most common events in web development. 9 mouse events are defined in the DOM3 level: The Click event, the user clicks the left mouse button triggered by the event or press ENTER to trigger the Dbclick event, when the user double-clicks the left click of the trigger; MouseDown event, triggered when the user presses the mouse buttons; MouseEnter Event , the user cursor is triggered from the first move outside the element to the range of elements. This event does not bubble, and the cursor is not triggered on moving to descendant elements, the MouseLeave event is triggered when an event located above the element is moved outside the range of the element, the MouseMove event, the mouse repeats as it moves inside the element, and the Mouseout event, triggered when the mouse pointer is over an element and then used to move it into another element, the MouseOver event, the mouse is outside the element, and the user first moves it inside the element, triggering the MouseUp event, releasing the mouse.

The Click event is triggered only if the MouseDown and MouseUp events are triggered on the same element. The Dbclick event is triggered only if the Click event is triggered two times.

1 varImg=document.getelementbyid ("Imgtest");2Eventutil.addevent (IMG, "MouseDown",function(event) {3 Console.log (event.type);4             });5Eventutil.addevent (IMG, "MouseUp",function(event) {6 Console.log (event.type);7             });8Eventutil.addevent (IMG, "click",function(event) {9 Console.log (event.type);Ten             }); OneEventutil.addevent (IMG, "DblClick",function(event) { A Console.log (event.type); -});

The above code registers the MouseDown, MouseUp, click, DblClick events on the IMG. When you double-click IMG, Output: MouseDown, MouseUp, click, MouseDown, MouseUp, click, DblClick.

The mouse wheel event is the MouseWheel event, which tracks the mouse wheel.

　　

1Eventutil.addevent (document.getElementById ("Imgtest"), "MouseMove",function(event) {2Event=eventutil.getevent ();3                 varpagex=Event.pagex,4pagey=Event.pagey;5                 if(!Event.pagex) {6pagex=event.clientx+ (document.body.scrollleft| |document.documentElement.scrollLeft);7                 }8                 if(!pagey) {9pagey=event.clienty+ (document.body.scrolltop| |document.documentElement.scrollTop);Ten                 } OneConsole.log (pagex+ "," +pagey); A})

The above code can display the page position information of the mouse in real time. Even with the scroll bar, it can be calculated correctly.

• Keyboard and Text events

The user will trigger keyboard events when using the keyboard, there are 3 events: The KeyDown event, triggered when the user presses any key on the keyboard, if you press and hold will repeatedly trigger this event, the KeyPress event, when the user presses a character key on the keyboard to trigger, if you press and hold will repeatedly trigger this event The KeyUp event is triggered when a key on the keyboard is released.

When a user presses a character key on the keyboard, the KeyDown event is triggered first, followed by the KeyPress event, and the KeyUp event is triggered last. Where KeyDown and KeyPress are triggered before the text box changes, KeyUp is triggered after the text box has changed. If the non-character set is pressed, the KeyDown and KeyUp events are triggered.

When the KeyDown and KeyUp events occur, the KeyCode property of the event object contains a code that corresponds to a specific key on the keyboard. For the alphanumeric character set, the KeyCode property value is the same as the lowercase letter or number in the ASCII code.

1 eventutil.addevent (document.getElementById ("Inputtext"), "KeyUp",function(event) { 2             event=eventutil.getevent (event); 3             Console.log (event.keycode); 4         })

• Composite events　　

A composite event is a newly added class of events in the DOM3 class for processing input sequences of IMEs. The IME allows the user to enter characters that are not found on the keyboard. IMEs often require multiple characters at the same time to determine a character, such as the input of Chinese. Includes 3 events: Compositionstart event, trigger when IME is on, indicates to enter, Compositionupdate event, trigger when new character is inserted, Compositionend event, trigger when IME composite system shuts down, return normal input state.

1 varTextbox=document.getelementbyid ("Inputtext");2Eventutil.addevent (textbox, "Compositionstart",function(event) {3Event=eventutil.getevent (event);4 Console.log (event.data);5         });6Eventutil.addevent (textbox, "Compositionupdate",function(event) {7Event=eventutil.getevent (event);8 Console.log (event.data);9         });TenEventutil.addevent (textbox, "Compositionend",function(event) { OneEvent=eventutil.getevent (event); A Console.log (event.data); -});

Talking about JavaScript events (event types)