자바 스크립트 HTML DOM 이벤트
HTML DOM 자바 스크립트, HTML은 이벤트에 반응하는 기능을 갖는다.
예
이벤트에 반응
이벤트가 발생할 때, 우리는 사용자가 HTML 요소를 클릭 할 때와 같이, 자바 스크립트를 실행할 수있다.
는 HTML 이벤트 속성에 사용자가 요소를 클릭 할 때 코드를 실행하기 위해, 자바 스크립트 코드를 추가합니다 :
HTML 이벤트 예 :
- 사용자는 마우스를 클릭하면
- 때 페이지가로드입니다
- 때 이미지가로드
- 마우스가 요소 위에 이동할 때
- 입력 필드가 변경되면
- 당신은 HTML 양식을 제출하면
- 사용자가 키를 트리거하면
이 예에서,시 클릭 한 <H1> 요소에 대해, 사용자는 그 내용을 변경한다 :
예
<HTML>
<바디>
<H1의 onclick = "this.innerHTML = 'Ooops!'"> 텍스트를 클릭! </ H1>
</ BODY>
</ HTML>
»시도
이 경우 이벤트 핸들러에서 함수를 호출합니다 :
예
<HTML>
<헤드>
<스크립트>
기능 changetext (ID)
{
id.innerHTML = "Ooops!";
}
</ 스크립트>
</ 헤드>
<바디>
<H1의 onclick = "changetext (이)"> 텍스트를 클릭! </ H1>
</ BODY>
</ HTML>
»시도
HTML 이벤트 속성
요소를 HTML로 이벤트를 지정하려면 이벤트 속성을 사용할 수 있습니다.
상기 예에서, 함수는 버튼을 클릭 할 때 displayDate가 실행이라는.
이벤트를 할당하는 HTML DOM을 사용하여
HTML DOM은 HTML 요소에 이벤트를 할당 자바 스크립트를 사용할 수 있습니다 :
예
버튼 요소의 onclick 이벤트에 할당 :
. 중요 document.getElementById ( "myBtn")의 onclick = 함수 () {displayDate ()};
</ 스크립트>
»시도
상기 예에서, 함수라는 displayDate 식 myButn "HTML 요소에 할당된다.
자바 스크립트 기능이 실행됩니다 때 버튼을 클릭합니다.
온로드 및으로 onUnload 이벤트
사용자가 입력하거나 페이지를 떠날 때 온로드 및으로 onUnload 이벤트가 트리거됩니다.
온로드 이벤트는 페이지의 정확한 버전을로드하기 위해이 정보를 브라우저 유형 및 브라우저 버전 방문자가 검출을 사용하고, 기초 할 수있다.
온로드 및 쿠키으로 onUnload 이벤트를 처리하기 위해 사용될 수있다.
onchange를 이벤트
onchange를 이벤트 종종 결합 된 입력 필드의 유효성 검사를 사용합니다.
여기에 onchange를 사용하는 방법의 예입니다. 사용자가 입력 필드의 내용을 변경하는 경우, 자로 () 함수를 호출한다.
onMouseover와 및 이벤트 onmouseout
onMouseover와 및 이벤트 기능을 트리거하는 데 사용될 수 onmouseout 때 제거 HTML 요소 또는 요소의 상부에 사용자의 마우스 이동한다.
하면 onMouseDown, onMouseUp에와 온 클릭 이벤트
하면 onMouseDown, onMouseUp에와 온 클릭은 마우스 클릭 이벤트의 모든 부분을 구성한다. 마우스 클릭의 완료, 그것은 onclick 이벤트를 트리거 할 때 먼저, 마우스 단추를 놓을 때 마우스 버튼 이벤트하면 onMouseDown 트리거를 클릭하면, 그것은 마지막으로 이벤트를 onMouseUp에 트리거 할 것이다.
예
간단한하면 onMouseDown-onMouseUp에 예 :
더 많은 예제
하면 onMouseDown 및 onMouseUp에
사용자는 마우스 버튼, 화상의 교체를 누르면.
온로드
페이지로드가 완료되면, 메시지 상자를 표시합니다.
onfocus 및
입력 필드에 포커스가있는 경우, 배경색을 변경합니다.
마우스 이벤트
포인터가 요소 위로 이동하면, 그 컬러를 변경, 텍스트 중 포인터 이동, 색 다시 변경할 때.