JavaScript HTML DOM 이벤트에 대한 지식
- jacklove원래의
- 2018-05-07 11:10:111176검색
JavaScript HTML DOM 이벤트는 js에서 중요한 역할을 합니다. 이 문서에서는 관련 지식에 대한 자세한 설명을 제공합니다.
이벤트에 반응
사용자가 HTML 요소를 클릭하는 등 이벤트가 발생할 때 JavaScript를 실행할 수 있습니다.
사용자가 요소를 클릭할 때 코드를 실행하려면 HTML 이벤트 속성에 JavaScript 코드를 추가하세요.
onclick=JavaScript
HTML 이벤트의 예:
사용자가 마우스를 클릭할 때
페이지가 로드될 때
이미지가 로드되었을 때
요소 위에 마우스를 올렸을 때
입력 필드가 변경되었을 때
HTML 양식이 제출되었을 때
사용자가 키 누르기를 실행할 때
이 경우, 사용자가 1179f652af8537777d18befc1b0d4a32 요소를 클릭하면 해당 콘텐츠가 변경됩니다.
Instance
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
이 예는 이벤트 핸들러에서 함수를 호출합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>HTML 이벤트 속성
이벤트를 HTML 요소에 할당하려면, 이벤트 속성을 사용할 수 있습니다.
onclick 이벤트를 버튼 요소에 할당합니다:
<button onclick="displayDate()">点这里</button>
위의 예에서는 버튼을 클릭할 때 displayDate라는 함수가 실행됩니다.
HTML DOM을 사용하여 이벤트 할당
HTML DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있습니다.
onclick 이벤트를 버튼 요소에 할당:
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>위 예에서는 displayDate라는 함수가 id에 할당됩니다. "myBtn"에 대한 HTML 요소입니다.
버튼을 클릭하면 Javascript 기능이 실행됩니다.
onload 및 onunload 이벤트
onload 및 onunload 이벤트는 사용자가 페이지에 들어가거나 나갈 때 트리거됩니다.
onload 이벤트를 사용하면 방문자의 브라우저 유형과 브라우저 버전을 감지하고 이 정보를 기반으로 올바른 버전의 웹 페이지를 로드할 수 있습니다.
onload 및 onunload 이벤트를 사용하여 쿠키를 처리할 수 있습니다.
Example
<body onload="checkCookies()">
onchange event
onchange 이벤트는 입력 필드의 유효성 검사와 함께 사용되는 경우가 많습니다.
다음은 onchange 사용 방법의 예입니다. 사용자가 입력 필드의 내용을 변경하면 upperCase() 함수가 호출됩니다.
Instances
<input type="text" id="fname" onchange="upperCase()">
onmouseover 및 onmouseout 이벤트
onmouseover 및 onmouseout 이벤트는 사용자의 마우스가 HTML 요소 위나 밖으로 움직일 때 기능을 트리거하는 데 사용할 수 있습니다.
onmousedown, onmouseup 및 onclick 이벤트
onmousedown, onmouseup 및 onclick은 마우스 클릭 이벤트의 모든 부분을 구성합니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 발생하고, 마우스 버튼을 놓으면 onmouseup 이벤트가 발생하며, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 발생합니다.
이 글은 DOM 이벤트 관련 지식에 대한 이해를 제공합니다. 더 많은 학습 자료를 보려면 PHP 중국어 웹사이트를 팔로우하세요.
관련 권장 사항:
위 내용은 JavaScript HTML DOM 이벤트에 대한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!