Latest web development tutorials

HTML DOM 이벤트 객체

HTML DOM 이벤트

HTML DOM 이벤트는 자바 스크립트가 HTML 문서의 요소에 다른 이벤트 핸들러를 등록 할 수 있습니다.

이벤트가 발생하기 전에 종종 함수와 함께 사용 이벤트 함수는 실행되지 않을 것이다! (사용자가 이러한 버튼을 클릭).

팁 : W3C 레벨 2 DOM 이벤트에 표준화 된 이벤트 모델.


HTML DOM 이벤트

DOM은 : DOM 속성 사용의 레벨을 나타낸다.

마우스 이벤트

재산 기술 DOM
온 클릭 사용자가 오브젝트 핸들을 클릭 할 때 이벤트라고.
는 onContextMenu 사용자가 컨텍스트 메뉴를 열려면 마우스 오른쪽 버튼을 클릭 할 때 트리거
ondblclick 사용자가 객체 핸들을 두 번 클릭하면 이벤트라고합니다.
하면 onMouseDown 마우스 버튼을 누르면.
onmouseenter 화재는 마우스 포인터 요소로 이동할 때.
onmouseleave 마우스 포인터가 트리거 소자 밖으로 이동할 때
으로 onMouseMove 마우스가 이동됩니다.
onMouseover와 요소 위에서 마우스.
onmouseout 멀리 요소에서 마우스.
onMouseUp에 마우스 버튼이 해제됩니다.

키보드 이벤트

属性 描述 DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

프레임 / 객체 (프레임 / 개체) 이벤트

属性 描述 DOM
onabort 图像的加载被中断。 ( <object>) 2
onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发 2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( <body> 和 <frameset>) 2

양식 이벤트

属性 描述 DOM
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input="search">)  
onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
onsubmit 表单提交时触发 2

클립 보드 이벤트

재산 기술 DOM
oncopy 이벤트가 트리거 될 때 사용자 복사 내용 요소
oncut 이벤트가 트리거 될 때 사용자 전단 요소 내용
onpaste 사용자가 요소의 내용을 붙여 넣을 때 이벤트가 트리거됩니다

인쇄 이벤트

재산 기술 DOM
onafterprint 트리거 이벤트가 이미 이미 폐쇄되는 페이지를 인쇄하기 시작하거나 창을 인쇄했다
onbeforeprint 페이지가 인쇄를 시작하려고 할 때 이벤트가 트리거됩니다

드래그 이벤트

행사 기술 DOM
ondrag 이 행사는 요소가 드래그 될 때 트리거됩니다
ondragend 사용자가 완료 요소를 드래그 할 때 이벤트가 트리거됩니다
ondragenter 상기 드롭 대상으로 요소를 드래그 할 때이 이벤트가 트리거됩니다
ondragleave 드래그 요소가 드롭 대상을 떠날 때이 이벤트가 트리거됩니다
으로 onDragOver 대상은 드래그 요소에 배치 될 때 이벤트가 트리거됩니다
ondragstart 사용자가 요소를 끌기 시작되면 이벤트가 트리거됩니다
ondrop 드래그 소자가 대상 지역에 배치 될 때이 이벤트 트리거

멀티미디어 (미디어) 이벤트

행사 기술 DOM
이것은 onAbort 로드 할 때 이벤트 비디오 / 오디오 (오디오 / 비디오) 트리거를 종료합니다.
oncanplay 이벤트가 비디오 / 오디오 (오디오 / 비디오) 재생을 시작할 수있는 사용자에 트리거됩니다.
oncanplaythrough 트리거 이벤트는 일반 비디오 / 오디오 (오디오 / 비디오)에서 일시 정지 버퍼없이 재생할 수 있습니다.
ondurationchange 이벤트 비디오 / 오디오 (오디오 / 비디오) 기간 트리거 변경.
onemptied 트리거 목록이 비어 현재 플레이어
onended 이벤트 트리거의 비디오 / 오디오 (오디오 / 비디오)의 재생이 종료.
의 OnError 오류가 비디오 / 오디오 중 에러가 발생되면 이벤트가 트리거 (오디오 / 비디오) 데이터가로드됩니다.
onloadeddata 브라우저의 이벤트는 비디오 / 오디오 (오디오 / 비디오) 트리거 현재 프레임을로드합니다.
onloadedmetadata 로딩 후 이벤트 메타 데이터를 지정된 비디오 / 오디오 (오디오 / 비디오) 트리거.
onLoadStart를 브라우저의 이벤트는 지정된 비디오 / 오디오 (오디오 / 비디오) 트리거를 찾고 시작합니다.
onpause 비디오 / 오디오 (오디오 / 비디오) 일시 정지 트리거 이벤트입니다.
onplay 이벤트는 비디오 / 오디오 (오디오 / 비디오) 재생을 시작하는 트리거.
onplaying 준비가 다시 재생을 시작하면 이벤트 비디오 / 오디오 (오디오 / 비디오) 일시 정지 또는 버퍼링 한 후 트리거됩니다.
으로 onProgress 브라우저에서 지정된 이벤트 트리거 (오디오 / 비디오) 비디오 / 오디오를 다운로드합니다.
onratechange 트리거 변경 이벤트시 비디오 / 오디오 (오디오 / 비디오) 재생 속도를 전송하는 단계를 포함한다.
onseeked 이벤트에서는, 사용자가 비디오 / 오디오를 재배치 (오디오 / 비디오)의 재생 위치가 트리거.
onseeking 사용자가 이벤트 비디오 / 오디오 (오디오 / 비디오) 위치를 변경하기 시작 발생합니다.
onstalled 브라우저에서 미디어 이벤트 데이터를 얻을 수 있지만, 트리거 될 때 미디어 데이터를 사용할 수 없습니다.
onsuspend 이벤트 읽을 수있는 브라우저에서 미디어 데이터의 정지를 트리거.
ontimeupdate 현재의 재생 위치가 변화를 보낼 때 이벤트가 트리거.
onvolumechange 이벤트시 부피 변화를 유발.
onwaiting 비디오는 다음 프레임 버퍼를 재생하고자 할 때 이벤트가 트리거되어 있기 때문에 필요합니다.

애니메이션 이벤트

행사 기술 DOM
animationend 애니메이션 CSS 재생이 완료되면이 이벤트가 트리거됩니다
animationiteration 하는 CSS 애니메이션을 반복 할 때이 이벤트가 트리거됩니다
animationstart 애니메이션 CSS 재생을 시작하면이 이벤트가 트리거됩니다

전환 이벤트

행사 기술 DOM
transitionend 이벤트는 전환을 완료하기 위해 CSS 후 트리거됩니다.

기타 이벤트

행사 기술 DOM
의 onMessage 이벤트가 또는 객체 (웹 소켓, 웹 작업자, 이벤트 원본 또는 서브 프레임 또는 부모 창)에서 발생하면 메시지를 수신
으로 onMouseWheel 사용되지 않습니다. 사용 onwheel 이벤트 대체를
ononline 브라우저가 온라인 일 경우이 이벤트가 트리거됩니다.
onoffline 브라우저가 오프라인으로 작업을 시작해야 할 때이 이벤트가 트리거됩니다.
onpopstate 이 이벤트는 트리거 될 때 윈도우 변화의 검색 기록 (역사 개체).
에서 onShow <메뉴> 요소가 컨텍스트 메뉴 트리거에 표시되는 이벤트
하는 onstorage 이 이벤트는 트리거 될 때 웹 저장소 (HTML 5 웹 저장) 업데이트
ontoggle 사용자가 <정보> 요소를 열거 나 닫을 때 이벤트가 트리거됩니다
onwheel 이 이벤트는 요소에서 아래로 마우스 휠 스크롤 할 때 트리거되고,

이벤트 객체

상수

静态变量 描述 DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3) 1
AT-TARGET 当前事件是目标阶段,在评估目标事件(1) 2
BUBBLING-PHASE 当前的事件为冒泡阶段 (2) 3

재산

재산 기술 DOM
거품 이벤트가 버블 링 이벤트 유형인지 여부를 나타내는 부울 값을 반환합니다.
취소 할 이벤트가 기본 동작 프로를 취소 할 수 있는지 여부를 나타내는 부울 값을 반환합니다.
currentTarget 그 이벤트 리스너가 이벤트 요소를 트리거 돌려줍니다.
의 EventPhase 이벤트 확산의 현재 단계를 돌려줍니다.
목표 이 이벤트 (이벤트 대상 노드)를 실행 한 요소를 돌려줍니다.
때문에, timeStamp 생성 된 이벤트의 날짜와 시간을 돌려줍니다.
유형 이벤트 객체가 나타내는 현재 이벤트의 이름을 돌려줍니다.

방법

方法 描述 DOM
initEvent() 初始化新创建的 Event 对象的属性。 2
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 2
stopPropagation() 不再派发事件。 2

대상 이벤트 객체

방법

方法 描述 DOM
addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) 2

이벤트 리스너 객체

방법

方法 描述 DOM
handleEvent() 把任意对象注册为事件处理程序 2

문서 객체 이벤트

방법

方法 描述 DOM
createEvent() 2

마우스 / 키보드 이벤트 객체

재산

属性 描述 DOM
altKey 返回当事件被触发时,"ALT" 是否被按下。 2
button 返回当事件被触发时,哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时,鼠标指针的水平坐标。 2
clientY 返回当事件被触发时,鼠标指针的垂直坐标。 2
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时,"meta" 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。 2
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 2
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。 2

방법

方法 描述 W3C
initMouseEvent() 初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3