Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the knowledge related to HTML's DOM event". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the knowledge related to HTML's DOM event" can help you solve the problem.

HTML DOM event

The HTML DOM event allows Javascript to register different event handlers in the HTML document element.

Events are usually used in conjunction with functions, which are not executed before the event occurs! (if the user clicks the button).

Tip: the event model is standardized in W3C level 2 DOM events.

HTML DOM event

DOM: indicates the DOM attribute level used.

Mouse event

Property describes the event handle that DOMonclick calls when a user clicks on an object. 2oncontextmenu triggers the event handle that ondblclick calls when the user double-clicks an object when the user clicks the right mouse button to open the context menu. The 2onmousedown mouse button is pressed. 2onmouseenter triggers when the mouse pointer moves over an element. 2onmouseleave triggers 2onmousemove mouse movement when the mouse pointer is moved away from the element. 2onmouseover mouse over an element. Move the 2onmouseout mouse away from an element. The 2onmouseup mouse button is released. two

Keyboard event

Property describes the DOMonkeydown when a keyboard key is pressed. One of the 2onkeypress keyboard keys is pressed and released. One of the keyboard keys in 2onkeyup has been released. two

Framework / object (Frame/Object) event

Property describes that the load of the DOMonabort image was interrupted. () 2onbeforeunload this event triggers an error when 2onerror loads a document or image when it is about to leave the page (refresh or close). (, and) onhashchange this event is triggered when the anchor portion of the current URL is modified. Onload A page or an image finishes loading. 2onpageshow this event triggers onpagehide when the user visits the page. This event triggers the onresize window or frame to be resized when the user leaves the current page and jumps to another page. 2onscroll the event that occurs when a document is scrolled. The 2onunload user exits the page. (and) 2

Form event

Property describes that 2onchange is triggered when the DOMonblur element loses focus this event triggers when the content of the form element changes ( And) 2onfocus element to trigger focus when 2onfocusin element is about to gain focus trigger 2onfocusout element is about to lose focus trigger 2oninput element to get user input trigger 3onreset form reset trigger 2onsearch user input text into search field trigger () onselect user select text trigger (and) trigger 2onsubmit form submission 2

Clipboard event

Attribute description DOMoncopy this event triggers oncut when the user copies the element content, the event triggers the onpaste when the user cuts the element content, and the event triggers when the user pastes the element content

Print event

Property describes DOMonafterprint this event triggers onbeforeprint when the page has started printing, or when the print window has been closed this event is triggered when the page is about to start printing

Drag event

Event description DOMondrag the event triggers ondragend when the element is being dragged the event triggers the ondragenter when the user completes the drag of the element, the event triggers ondragleave when the dragged element enters the placement target, the event triggers ondragover when the dragged element leaves the placement target, the event triggers ondragstart when the dragging element is placed on the target, the event triggers ondrop when the user starts dragging the element, the event triggers when the dragging element is placed in the target area.

Multimedia (Media) events

Event description DOMonabort event is triggered when video / audio (audio/video) terminates loading. The oncanplay event is triggered when the user can start playing video / audio (audio/video). The oncanplaythrough event is triggered when video / audio (audio/video) can be played normally without pause and buffering. The ondurationchange event is triggered when the duration of the video / audio (audio/video) changes. The onended event triggered when the current playlist of onemptied is empty is triggered at the end of video / audio (audio/video) playback. The onerror event is triggered when an error occurs during video / audio (audio/video) data loading. The onloadeddata event triggers when the browser loads the current frame of video / audio (audio/video). The onloadedmetadata event is triggered after the specified video / audio (audio/video) metadata is loaded. The onloadstart event starts looking for a specified video / audio (audio/video) trigger in the browser. The onpause event is triggered when video / audio (audio/video) is paused. The onplay event is triggered when video / audio (audio/video) starts playing. The onplaying event is triggered when video / audio (audio/video) is paused or is ready to restart playback after buffering. The onprogress event is triggered when the browser downloads the specified video / audio (audio/video). The onratechange event is triggered when the video / audio (audio/video) playback speed changes. The onseeked event is triggered after the user relocates the video / audio (audio/video) playback position. The onseeking event is triggered when the user starts relocating video / audio (audio/video). The onstalled event is triggered when the browser gets media data, but the media data is not available. The onsuspend event is triggered when the browser stops reading media data. The ontimeupdate event is triggered when a change is sent to the current playback position. The onvolumechange event is triggered when the volume changes. The onwaiting event is triggered when the video needs to be buffered because the next frame is to be played.

Animation event

Event description DOManimationend this event triggers the animationiteration when the CSS animation ends playing, the event triggers the animationstart when the CSS animation is played repeatedly, and the event triggers when the CSS animation starts to play

Transitional event

Event description DOMtransitionend this event is triggered after the CSS completes the transition.

Other events

Event description DOMonmessage the trigger onmousewheel is deprecated when the event receives a message through or from an object (WebSocket, Web Worker, Event Source, or child frame or parent window). Use the onwheel event instead of ononline, which is triggered when the browser starts working online. Onoffline this event is triggered when the browser starts working offline. Onpopstate this event is triggered when the window's browsing history (history object) changes. Onshow this event triggers onstorage when the element is displayed in the context menu. This event triggers ontoggle when Web Storage (HTML 5 Web Storage) is updated. This event triggers onwheel when the user opens or closes the element. This event is triggered when the mouse wheel scrolls up and down the element.

Event object

Constant

Static variables describe DOMCAPTURING-PHASE current event phase as capture phase (3) 1AT-TARGET current event is target phase, in evaluation target event (1) 2BUBBLING-PHASE current event is bubbling phase (2) 3

Attribute

Property description DOMbubbles returns a Boolean value indicating whether the event is a bubbling event type. 2cancelable returns a Boolean value indicating whether the event can hold the default action that can be canceled. 2currentTarget returns the element whose event listener triggered the event. 2eventPhase returns the current stage of event propagation. 2target returns the element that triggered this event (the target node of the event). 2timeStamp returns the date and time when the event was generated. 2type returns the name of the event represented by the current Event object. two

Method

The method describes how DOMinitEvent () initializes the properties of the newly created Event object. 2preventDefault () tells the browser not to perform the default action associated with the event. 2stopPropagation () no longer dispatches events. two

Target event object

Method

Method description DOMaddEventListener () allows you to register a listening event in the target event (IE8 = attachEvent ()) 2dispatchEvent () allows you to send an event to the listener (IE8 = fireEvent ()) 2removeEventListener () to run a listening event registered on the event target (IE8 = detachEvent ()) 2

Event listener object

Method

Method description DOMhandleEvent () registers any object as event handler 2

Document event object

Method

Method description DOMcreateEvent () 2

Mouse / keyboard event object

Attribute

Property describes whether the DOMaltKey returns whether "ALT" is pressed when the event is triggered. 2button returns which mouse button is clicked when the event is triggered. 2clientX returns the horizontal coordinates of the mouse pointer when the event is triggered. 2clientY returns the vertical coordinates of the mouse pointer when the event is triggered. 2ctrlKey returns whether the "CTRL" key is pressed when the event is triggered. 2Location returns the location of the key on the device 3charCode returns the alphabetical code for the value of the onkeypress event trigger key. 2key returns the identifier of the key when the key is pressed. 3keyCode returns the character code of the value of the key triggered by the onkeypress event, or the key code of the onkeydown or onkeyup event. 2which returns the character code of the value of the key triggered by the onkeypress event, or the key code of the onkeydown or onkeyup event. 2metaKey returns whether the "meta" key is pressed when the event is triggered. 2relatedTarget returns the node associated with the target node of the event. 2screenX returns the horizontal coordinates of the mouse pointer when an event is triggered. 2screenY returns the vertical coordinates of the mouse pointer when an event is triggered. 2shiftKey returns whether the "SHIFT" key is pressed when the event is triggered. two

Method

Method description W3CinitMouseEvent () initializes the value of the mouse event object 2initKeyboardEvent () initializes the value of the keyboard event object 3 about "what is the knowledge about DOM events of HTML", thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.