JavaScript HTML DOM 이벤트에 대한 지식-JS 튜토리얼-php.cn

JavaScript HTML DOM 이벤트에 대한 지식

jacklove

풀어 주다： 2018-05-07 11:10:11

원래의

1152명이 탐색했습니다.

JavaScript HTML DOM 이벤트는 js에서 중요한 역할을 합니다. 이 문서에서는 관련 지식에 대한 자세한 설명을 제공합니다.

이벤트에 반응

사용자가 HTML 요소를 클릭하는 등 이벤트가 발생할 때 JavaScript를 실행할 수 있습니다.

사용자가 요소를 클릭할 때 코드를 실행하려면 HTML 이벤트 속성에 JavaScript 코드를 추가하세요.

onclick=JavaScript

HTML 이벤트의 예:

사용자가 마우스를 클릭할 때

페이지가 로드될 때

이미지가 로드되었을 때

요소 위에 마우스를 올렸을 때

입력 필드가 변경되었을 때

HTML 양식이 제출되었을 때

사용자가 키 누르기를 실행할 때

이 경우, 사용자가 < h1> 요소를 클릭하면 해당 콘텐츠가 변경됩니다.

Instance

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML=&#39;Ooops!&#39;">点击文本!</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 중국어 웹사이트를 팔로우하세요.