HTML DOM 자바 스크립트 HTML 이벤트에 반응 할 수 있습니다 :
이벤트에 반응
이벤트가 사용자가 HTML 요소를 클릭 할 때 마찬가지로 발생할 때 자바 스크립트가 실행될 수있다.
사용자가 요소를 클릭 할 때 코드를 실행하기 위해, HTML 이벤트 속성에 자바 스크립트 코드를 추가합니다 :
onclick=JavaScript
HTML 이벤트의 예 :
- 사용자는 마우스를 클릭하면
- 웹 페이지가로드되면
- 이미지가로드되면
- 마우스가 요소 위에 이동할 때
- 입력 필드가 변경되면
- HTML 양식이 제출되면
- 사용자가 키 스트로크 때
이 예에서, 컨텐츠의 <h1> 사용자가 클릭 할 때 소자 변화 :
예
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
»그것을 자신을 시도 이 예에서, 함수는 이벤트 핸들러를 호출한다 :
예
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
»그것을 자신을 시도 HTML 이벤트 속성
당신이 이벤트 속성을 사용할 수 있습니다 HTML 요소 이벤트를 할당합니다.
위의 예에서,라는 함수 displayDate 버튼을 클릭하면 실행됩니다.
는 HTML DOM을 사용하여 이벤트를 할당
되는 HTML DOM은 자바 스크립트를 사용하여 HTML 요소에 이벤트를 할당 할 수 있습니다 :
예
버튼 요소에 onclick 이벤트를 할당합니다 :
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
»그것을 자신을 시도 위의 예에서,라는 함수 displayDate 와 HTML 요소에 할당 된 id="myBtn" .
버튼을 클릭하면이 기능이 실행됩니다.
onload 및 onunload 이벤트
onload 및 onunload 사용자가 입력하거나 페이지를 벗어날 때 이벤트가 트리거됩니다.
onload 이벤트는 방문자의 브라우저 유형 및 브라우저 버전을 확인하고, 정보에 기초하여 웹 페이지의 적절한 버전을 로딩 할 수있다.
onload 및 onunload 이벤트는 쿠키를 처리하는데 사용될 수있다.
onchange 이벤트
onchange 이벤트들은 입력 필드의 유효성과 조합하여 사용된다.
아래에 사용하는 방법의 일례이다 onchange . upperCase() 는 사용자가 입력 필드의 내용을 변경할 때 함수가 호출된다.
onmouseover 와 onmouseout 이벤트
onmouseover 및 onmouseout 이벤트는 사용자가 위에 마이스 때 기능을 트리거하는 데 사용하거나 할 수 있고, HTML 요소 중 :
onmousedown , onmouseup 와 onclick 이벤트
onmousedown , onmouseup , 그리고 onclick 이벤트는 마우스 클릭의 모든 부분입니다. 마우스 버튼을 클릭하면 첫째, onmousedown 이벤트가 트리거, 마우스 버튼을 놓을 때 다음의 onmouseup 마우스 클릭이 완료되면 이벤트가 트리거되고, 결국은 onclick 이벤트가 트리거됩니다.
더 예
하면 onMouseDown 및 onMouseUp에
사용자가 마우스 버튼을 누르고있을 때, 이미지를 변경합니다.
온로드
페이지가로드가 완료 경고 상자를 표시합니다.
onfocus 및
포커스되는 경우 입력 필드의 배경 색상을 변경합니다.
마우스 이벤트
커서가 그 위에 이동할 때 요소의 색을 변경한다.
HTML DOM 이벤트 객체 참조
모든 HTML DOM 이벤트의 목록은 우리가 완전한 보면 HTML DOM 이벤트 객체 참조 .