HTML DOM 이벤트
HTML DOM 자바 스크립트 이벤트가 HTML에 반응 할 수 있습니다.
예
이벤트에 반응
이벤트가 발생할 때, 이러한 사용자가 HTML 요소를 클릭 할 때와 같이, 자바 스크립트를 실행할 수있다.
사용자가 요소를 클릭 할 때 코드를 실행하려면, 이벤트 속성을 HTML에 자바 스크립트 코드를 추가합니다 :
HTML 이벤트 예 :
- 사용자는 마우스를 클릭하면
- 때 페이지가로드입니다
- 때 이미지가로드
- 마우스가 요소 위에 이동할 때
- 입력 필드가 변경되면
- HTML 양식이 제출되면
- 사용자가 키를 트리거하면
사용자가 클릭하면,이 예에서, 그것은 <H1> 요소의 내용을 변경한다 :
예
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
»시도
이 경우, 함수는 이벤트 핸들러를 호출한다 :
예
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
»시도
HTML 이벤트 속성
요소를 HTML로 이벤트를 지정하려면 이벤트 속성을 사용할 수 있습니다.
이 버튼을 클릭하면 위의 예에서, 그것은 displayDate라는 기능을 수행한다.
이벤트를 할당하는 HTML DOM을 사용하여
HTML DOM 이벤트는 HTML 요소를 지정 자바 스크립트를 사용할 수 있습니다 :
예
온 클릭 이벤트 버튼 요소를 할당 :
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
»시도
위의 예에서, displayDate라는 기능은 ID = myButn "HTML 요소에 할당됩니다.
버튼이 클릭되면, 기능 실행.
온로드 및으로 onUnload 이벤트
사용자가 입력하거나 페이지를 떠날 때, 그것은 온로드 및으로 onUnload 이벤트 트리거합니다.
온로드 이벤트는 페이지의 다른 버전을 로딩 정보에 기초하여 순서 방문자 브라우저 종류 및 버전을 확인하는데 사용될 수있다.
쿠키를 처리하기위한 온로드 및으로 onUnload 이벤트.
onchange를 이벤트
onchange를 이벤트가 자주 입력 필드의 유효성을 검사하는 데 사용됩니다.
다음의 예는 onchange를 사용하는 방법을 보여줍니다. 사용자가 입력 필드의 내용을 변경하는 경우 대문자 () 함수를 호출한다.
onMouseover와 및 이벤트 onmouseout
onMouseover와, 이벤트를 마우스 포인터로 또는 소자 밖으로 이동할 때 기능을 트리거하는 데 사용될 수 onmouseout.
하면 onMouseDown, onMouseUp에와 온 클릭 이벤트
하면 onMouseDown, onMouseUp에 온 클릭 이벤트는 마우스를 클릭하고 전체 과정입니다. 마우스 버튼을 클릭하면 첫째, 이벤트를하면 onMouseDown 트리거, 마우스 단추를 놓을 때 다음, 그것은 이벤트를 onMouseUp에 트리거, 그리고 마지막으로, 마우스 마침을 클릭하면 온 클릭 이벤트가 트리거됩니다.
HTML DOM 이벤트 객체 참조
자세한 설명과 각 이벤트의 예를 들어, 우리의 방문하시기 바랍니다 HTML DOM 참조 설명서를 .