HTML 이벤트 속성
전역 이벤트 속성
HTML에는 사용자가 요소를 클릭할 때 JavaScript를 시작하는 것과 같이 이벤트가 브라우저에서 작업을 트리거할 수 있는 기능이 있습니다.
이벤트 프로그래밍에 대해 자세히 알아보려면 JavaScript 자습서 를 방문하십시오 .
다음은 이벤트 작업을 정의하기 위해 HTML 요소에 추가할 수 있는 전역 이벤트 속성입니다.
창 이벤트 속성
창 개체에 대해 트리거된 이벤트(<body> 태그에 적용됨):
| Attribute |
Value |
Description |
| onafterprint |
script |
Script to be run after the document is printed |
| onbeforeprint |
script |
Script to be run before the document is printed |
| onbeforeunload |
script |
Script to be run when the document is about to be unloaded |
| onerror |
script |
Script to be run when an error occurs |
| onhashchange |
script |
Script to be run when there has been changes to the anchor part of the a URL |
| onload |
script |
Fires after the page is finished loading |
| onmessage |
script |
Script to be run when the message is triggered |
| onoffline |
script |
Script to be run when the browser starts to work offline |
| ononline |
script |
Script to be run when the browser starts to work online |
| onpagehide |
script |
Script to be run when a user navigates away from a page |
| onpageshow |
script |
Script to be run when a user navigates to a page |
| onpopstate |
script |
Script to be run when the window's history changes |
| onresize |
script |
Fires when the browser window is resized |
| onstorage |
script |
Script to be run when a Web Storage area is updated |
| onunload |
script |
Fires once a page has unloaded (or the browser window has been closed) |
양식 이벤트
HTML 양식 내부의 작업에 의해 트리거되는 이벤트(거의 모든 HTML 요소에 적용되지만 양식 요소에서 가장 많이 사용됨):
| Attribute |
Value |
Description |
| onblur |
script |
Fires the moment that the element loses focus |
| onchange |
script |
Fires the moment when the value of the element is changed |
| oncontextmenu |
script |
Script to be run when a context menu is triggered |
| onfocus |
script |
Fires the moment when the element gets focus |
| oninput |
script |
Script to be run when an element gets user input |
| oninvalid |
script |
Script to be run when an element is invalid |
| onreset |
script |
Fires when the Reset button in a form is clicked |
| onsearch |
script |
Fires when the user writes something in a search field (for
<input="search">) |
| onselect |
script |
Fires after some text has been selected in an element |
| onsubmit |
script |
Fires when a form is submitted |
키보드 이벤트
| Attribute |
Value |
Description |
| onkeydown |
script |
Fires when a user is pressing a key |
| onkeypress |
script |
Fires when a user presses a key |
| onkeyup |
script |
Fires when a user releases a key |
마우스 이벤트
| Attribute |
Value |
Description |
| onclick |
script |
Fires on a mouse click on the element |
| ondblclick |
script |
Fires on a mouse double-click on the element |
| onmousedown |
script |
Fires when a mouse button is pressed down on an element |
| onmousemove |
script |
Fires when the mouse pointer is moving while it is over an element |
| onmouseout |
script |
Fires when the mouse pointer moves out of an element |
| onmouseover |
script |
Fires when the mouse pointer moves over an element |
| onmouseup |
script |
Fires when a mouse button is released over an element |
| onmousewheel |
script |
Deprecated. Use the onwheel attribute instead |
| onwheel |
script |
Fires when the mouse wheel rolls up or down over an element |
드래그 이벤트
| Attribute |
Value |
Description |
| ondrag |
script |
Script to be run when an element is dragged |
| ondragend |
script |
Script to be run at the end of a drag operation |
| ondragenter |
script |
Script to be run when an element has been dragged to a valid drop target |
| ondragleave |
script |
Script to be run when an element leaves a valid drop target |
| ondragover |
script |
Script to be run when an element is being dragged over a valid drop target |
| ondragstart |
script |
Script to be run at the start of a drag operation |
| ondrop |
script |
Script to be run when dragged element is being dropped |
| onscroll |
script |
Script to be run when an element's scrollbar is being scrolled |
클립보드 이벤트
| Attribute |
Value |
Description |
| oncopy |
script |
Fires when the user copies the content of an element |
| oncut |
script |
Fires when the user cuts the content of an element |
| onpaste |
script |
Fires when the user pastes some content in an element |
미디어 이벤트
비디오, 이미지 및 오디오와 같은 미디어에 의해 트리거되는 이벤트(모든 HTML 요소에 적용되지만 <audio>, <embed>, <img>, <object> 및 <video>와 같은 미디어 요소에서 가장 일반적임).
| Attribute |
Value |
Description |
| onabort |
script |
Script to be run on abort |
| oncanplay |
script |
Script to be run when a file is ready to start playing (when it has buffered enough to begin) |
| oncanplaythrough |
script |
Script to be run when a file can be played all the way to the end without pausing for buffering |
| oncuechange |
script |
Script to be run when the cue changes in a <track> element |
| ondurationchange |
script |
Script to be run when the length of the media changes |
| onemptied |
script |
Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) |
| onended |
script |
Script to be run when the media has reach the end (a useful event for messages like "thanks for listening") |
| onerror |
script |
Script to be run when an error occurs when the file is being loaded |
| onloadeddata |
script |
Script to be run when media data is loaded |
| onloadedmetadata |
script |
Script to be run when meta data (like dimensions and duration) are loaded |
| onloadstart |
script |
Script to be run just as the file begins to load before anything is actually
loaded |
| onpause |
script |
Script to be run when the media is paused either by the user or programmatically |
| onplay |
script |
Script to be run when the media is ready to start playing |
| onplaying |
script |
Script to be run when the media actually has started playing |
| onprogress |
script |
Script to be run when the browser is in the process of getting the media
data |
| onratechange |
script |
Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode) |
| onseeked |
script |
Script to be run when the seeking attribute is set to false indicating that seeking has ended |
| onseeking |
script |
Script to be run when the seeking attribute is set to true indicating that seeking is active |
| onstalled |
script |
Script to be run when the browser is unable to fetch the media data for whatever reason |
| onsuspend |
script |
Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason |
| ontimeupdate |
script |
Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) |
| onvolumechange |
script |
Script to be run each time the volume is changed which (includes setting the volume to "mute") |
| onwaiting |
script |
Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) |
기타 이벤트
| Attribute |
Value |
Description |
| ontoggle |
script |
Fires when the user opens or closes the <details> element |
