HTML DOM 이벤트
HTML DOM 이벤트는 자바 스크립트를 HTML 문서의 요소에 다른 이벤트 핸들러를 등록 할 수 있습니다.
이벤트는 일반적으로 함수와 조합하여 사용되며, 이벤트가 발생하기 전의 함수 (예컨대, 사용자가 버튼을 클릭 할 때와 같이)가 실행되지 않을 것이다.
팁 : 이벤트 모델은 DOM 레벨 2에 W3C에 의해 표준화되었다.
HTML DOM 이벤트
DOM은 : 있는 DOM 레벨 속성이 도입 나타냅니다.
마우스 이벤트
| Event | Description | DOM |
|---|
| onclick | The event occurs when the user clicks on an element | 2 |
| oncontextmenu | The event occurs when the user right-clicks on an element to open a context menu | 3 |
| ondblclick | The event occurs when the user double-clicks on an element | 2 |
| onmousedown | The event occurs when the user presses a mouse button over an element | 2 |
| onmouseenter | The event occurs when the pointer is moved onto an element | 2 |
| onmouseleave | The event occurs when the pointer is moved out of an element | 2 |
| onmousemove | The event occurs when the pointer is moving while it is over an element | 2 |
| onmouseover | The event occurs when the pointer is moved onto an element, or onto one of its children | 2 |
| onmouseout | The event occurs when a user moves the mouse pointer out of an element, or out of one of its children | 2 |
| onmouseup | The event occurs when a user releases a mouse button over an element | 2 |
키보드 이벤트
| Event | Description | DOM |
|---|
| onkeydown | The event occurs when the user is pressing a key | 2 |
| onkeypress | The event occurs when the user presses a key | 2 |
| onkeyup | The event occurs when the user releases a key | 2 |
프레임 / 개체 이벤트
| Event | Description | DOM |
|---|
| onabort | The event occurs when the loading of a resource has been aborted | 2 |
| onbeforeunload | The event occurs before the document is about to be unloaded | 2 |
| onerror | The event occurs when an error occurs while loading an external file | 2 |
| onhashchange | The event occurs when there has been changes to the anchor part of a URL | 3 |
| onload | The event occurs when an object has loaded | 2 |
| onpageshow | The event occurs when the user navigates to a webpage | 3 |
| onpagehide | The event occurs when the user navigates away from a webpage | 3 |
| onresize | The event occurs when the document view is resized | 2 |
| onscroll | The event occurs when an element's scrollbar is being scrolled | 2 |
| onunload | The event occurs once a page has unloaded (for <body>) | 2 |
양식 이벤트
| Event | Description | DOM |
|---|
| onblur | The event occurs when an element loses focus | 2 |
| onchange | The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>) | 2 |
| onfocus | The event occurs when an element gets focus | 2 |
| onfocusin | The event occurs when an element is about to get focus | 2 |
| onfocusout | The event occurs when an element is about to lose focus | 2 |
| oninput | The event occurs when an element gets user input | 3 |
| oninvalid | The event occurs when an element is invalid | 3 |
| onreset | The event occurs when a form is reset | 2 |
| onsearch | The event occurs when the user writes something in a search field (for <input="search">) | 3 |
| onselect | The event occurs after the user selects some text (for <input> and <textarea>) | 2 |
| onsubmit | The event occurs when a form is submitted | 2 |
드래그 이벤트
| Event | Description | DOM |
|---|
| ondrag | The event occurs when an element is being dragged | 3 |
| ondragend | The event occurs when the user has finished dragging an element | 3 |
| ondragenter | The event occurs when the dragged element enters the drop target | 3 |
| ondragleave | The event occurs when the dragged element leaves the drop target | 3 |
| ondragover | The event occurs when the dragged element is over the drop target | 3 |
| ondragstart | The event occurs when the user starts to drag an element | 3 |
| ondrop | The event occurs when the dragged element is dropped on the drop target | 3 |
클립 보드 이벤트
| Event | Description | DOM |
|---|
| oncopy | The event occurs when the user copies the content of an element | |
| oncut | The event occurs when the user cuts the content of an element | |
| onpaste | The event occurs when the user pastes some content in an element | |
인쇄 이벤트
| Event | Description | DOM |
|---|
| onafterprint | The event occurs when a page has started printing, or if the print dialogue box has been closed | 3 |
| onbeforeprint | The event occurs when a page is about to be printed | 3 |
미디어 이벤트
| Event | Description | DOM |
|---|
| onabort | The event occurs when the loading of a media is aborted | 3 |
| oncanplay | The event occurs when the browser can start playing the media (when it has buffered enough to begin) | 3 |
| oncanplaythrough | The event occurs when the browser can play through the media without stopping for buffering | 3 |
| ondurationchange | The event occurs when the duration of the media is changed | 3 |
| onemptied | The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects) | 3 |
| onended | The event occurs when the media has reach the end (useful for messages like "thanks for listening") | 3 |
| onerror | The event occurs when an error occurred during the loading of a media file | 3 |
| onloadeddata | The event occurs when media data is loaded | 3 |
| onloadedmetadata | The event occurs when meta data (like dimensions and duration) are loaded | 3 |
| onloadstart | The event occurs when the browser starts looking for the specified media | 3 |
| onpause | The event occurs when the media is paused either by the user or programmatically | 3 |
| onplay | The event occurs when the media has been started or is no longer paused | 3 |
| onplaying | The event occurs when the media is playing after having been paused or stopped for buffering | 3 |
| onprogress | The event occurs when the browser is in the process of getting the media data (downloading the media) | 3 |
| onratechange | The event occurs when the playing speed of the media is changed | 3 |
| onseeked | The event occurs when the user is finished moving/skipping to a new position in the media | 3 |
| onseeking | The event occurs when the user starts moving/skipping to a new position in the media | 3 |
| onstalled | The event occurs when the browser is trying to get media data, but data is not available | 3 |
| onsuspend | The event occurs when the browser is intentionally not getting media data | 3 |
| ontimeupdate | The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media) | 3 |
| onvolumechange | The event occurs when the volume of the media has changed (includes setting the volume to "mute") | 3 |
| onwaiting | The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data) | 3 |
애니메이션 이벤트
전환 이벤트
| Event | Description | DOM |
|---|
| transitionend | The event occurs when a CSS transition has completed | 3 |
서버 전송 이벤트
| Event | Description | DOM |
|---|
| onerror | The event occurs when an error occurs with the event source | |
| onmessage | The event occurs when a message is received through the event source | |
| onopen | The event occurs when a connection with the event source is opened | |
기타 이벤트
| Event | Description | DOM |
|---|
| onmessage | The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window) | 3 |
| onmousewheel | Deprecated. Use the onwheel event instead | |
| ononline | The event occurs when the browser starts to work online | 3 |
| onoffline | The event occurs when the browser starts to work offline | 3 |
| onpopstate | The event occurs when the window's history changes | 3 |
| onshow | The event occurs when a <menu> element is shown as a context menu | 3 |
| onstorage | The event occurs when a Web Storage area is updated | 3 |
| ontoggle | The event occurs when the user opens or closes the <details> element | 3 |
| onwheel | The event occurs when the mouse wheel rolls up or down over an element | 3 |
터치 이벤트
| Event | Description | DOM |
|---|
| ontouchcancel | The event occurs when the touch is interrupted | |
| ontouchend | The event occurs when a finger is removed from a touch screen | |
| ontouchmove | The event occurs when a finger is dragged across the screen | |
| ontouchstart | The event occurs when a finger is placed on a touch screen | |
이벤트 객체
상수
| Constant | Description | DOM |
|---|
| CAPTURING_PHASE | The current event phase is the capture phase (1) | 1 |
| AT_TARGET | The current event is in the target phase, i.e. it is being evaluated at the event target (2) | 2 |
| BUBBLING_PHASE | The current event phase is the bubbling phase (3) | 3 |
등록
| Property | Description | DOM |
|---|
| bubbles | Returns whether or not a specific event is a bubbling event | 2 |
| cancelable | Returns whether or not an event can have its default action prevented | 2 |
| currentTarget | Returns the element whose event listeners triggered the event | 2 |
| defaultPrevented | Returns whether or not the preventDefault() method was called for the event | 3 |
| eventPhase | Returns which phase of the event flow is currently being evaluated | 2 |
| isTrusted | Returns whether or not an event is trusted | 3 |
| target | Returns the element that triggered the event | 2 |
| timeStamp | Returns the time (in milliseconds relative to the epoch) at which the event was created | 2 |
| type | Returns the name of the event | 2 |
| view | Returns a reference to the Window object where the event occured | 2 |
방법
| Method | Description | DOM |
|---|
| initEvent() | Specifies the event type, whether or not the event can bubble, whether or not the event's default action can be prevented | 2 |
| preventDefault() | Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur | 2 |
| stopImmediatePropagation() | Prevents other listeners of the same event from being called | 3 |
| stopPropagation() | Prevents further propagation of an event during event flow | 2 |
MouseEvent 객체
| Property | Description | DOM |
|---|
| altKey | Returns whether the "ALT" key was pressed when the mouse event was triggered | 2 |
| button | Returns which mouse button was pressed when the mouse event was triggered | 2 |
| buttons | Returns which mouse buttons were pressed when the mouse event was triggered | 3 |
| clientX | Returns the horizontal coordinate of the mouse pointer, relative to the current window, when the mouse event was triggered | 2 |
| clientY | Returns the vertical coordinate of the mouse pointer, relative to the current window, when the mouse event was triggered | 2 |
| ctrlKey | Returns whether the "CTRL" key was pressed when the mouse event was triggered | 2 |
| detail | Returns a number that indicates how many times the mouse was clicked | 2 |
| metaKey | Returns whether the "META" key was pressed when an event was triggered | 2 |
| relatedTarget | Returns the element related to the element that triggered the mouse event | 2 |
| screenX | Returns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered | 2 |
| screenY | Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered | 2 |
| shiftKey | Returns whether the "SHIFT" key was pressed when an event was triggered | 2 |
| which | Returns which mouse button was pressed when the mouse event was triggered | 2 |
KeyboardEvent입니다 개체
| Property | Description | DOM |
|---|
| altKey | Returns whether the "ALT" key was pressed when the key event was triggered | 2 |
| ctrlKey | Returns whether the "CTRL" key was pressed when the key event was triggered | 2 |
| charCode | Returns the Unicode character code of the key that triggered the onkeypress event | 2 |
| key | Returns the key value of the key represented by the event | 3 |
| keyCode | Returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event | 2 |
| location | Returns the location of a key on the keyboard or device | 3 |
| metaKey | Returns whether the "meta" key was pressed when the key event was triggered | 2 |
| shiftKey | Returns whether the "SHIFT" key was pressed when the key event was triggered | 2 |
| which | Returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event | 2 |
HashChangeEvent 개체
| Property | Description | DOM |
|---|
| newURL | Returns the URL of the document, after the hash has been changed | |
| oldURL | Returns the URL of the document, before the hash was changed | |
PageTransitionEvent 개체
| Property | Description | DOM |
|---|
| persisted | Returns whether the webpage was cached by the browser | |
FocusEvent 객체
| Property | Description | DOM |
|---|
| relatedTarget | Returns the element related to the element that triggered the event | 3 |
AnimationEvent 개체
| Property | Description | DOM |
|---|
| animationName | Returns the name of the animation | |
| elapsedTime | Returns the number of seconds an animation has been running | |
TransitionEvent 개체
| Property | Description | DOM |
|---|
| propertyName | Returns the name of the CSS property associated with the transition | |
| elapsedTime | Returns the number of seconds a transition has been running | |
WheelEvent 개체
| Property | Description | DOM |
|---|
| deltaX | Returns the horizontal scroll amount of a mouse wheel (x-axis) | 3 |
| deltaY | Returns the vertical scroll amount of a mouse wheel (y-axis) | 3 |
| deltaZ | Returns the scroll amount of a mouse wheel for the z-axis | 3 |
| deltaMode | Returns a number that represents the unit of measurements for delta values (pixels, lines or pages) | 3 |