JavaScript HTML DOM 이벤트

HTML DOM은 JavaScript가 HTML 이벤트에 반응하는 기능을 제공합니다.

이벤트에 반응

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

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

onclick=JavaScript

HTML 이벤트의 예:

사용자가 마우스를 클릭할 때 페이지가 로드될 때 이미지가 로드될 때 로드할 때 요소 위로 마우스를 이동할 때 입력 필드가 변경될 때 HTML 양식이 제출될 때 사용자가 키 누르기를 실행할 때

이 경우 사용자가 클릭하면 <h1> 요소:

<!doctype html>
<html>
<meta charset="utf-8">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
<h1 onclick="this.innerHTML='hello!'">点我点我点我!</h1>
 </body>
</html>

이 경우 함수는 이벤트 핸들러에서 호출됩니다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本！</h1>
</body>
</html>

HTML 이벤트 속성

HTML 요소에 이벤트를 할당하려면 이벤트 속성을 사용할 수 있습니다.

버튼 요소에 onclick 이벤트를 할당합니다:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

위의 예에서 버튼을 클릭하면 displayDate라는 함수가 실행됩니다.

HTML DOM을 사용하여 이벤트 할당

HTML DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있습니다.

onclick 이벤트를 버튼 요소에 할당:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

위 예에서 displayDate라는 함수는 id =myButn에 할당됩니다. " HTML 요소입니다.

버튼을 클릭하면 해당 기능이 실행됩니다.

onload 및 onunload 이벤트

onload 및 onunload 이벤트는 사용자가 페이지에 들어가거나 나갈 때 발생합니다.

onload 이벤트를 사용하여 방문자 브라우저 유형과 버전을 확인하여 이 정보를 기반으로 다양한 버전의 웹페이지를 로드할 수 있습니다.

onload 및 onunload 이벤트를 사용하여 쿠키를 처리할 수 있습니다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

onchange 이벤트

onchange 이벤트가 입력에 자주 사용됩니다.

다음 예는 사용자가 입력 필드의 내용을 변경할 때 호출되는 onmouseover 및 onmouseout 이벤트입니다. 마우스 포인터가 요소로 또는 요소에서 멀어질 때 함수를 트리거합니다.

간단한 onmouseover-onmouseout 예:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
</html>

onmousedown, onmouseup 및 onclick 이벤트

Onmousedown, onmouseup 및 onclick 이벤트는 마우스 클릭의 전체 프로세스입니다. 먼저, 마우스 버튼을 클릭하면 onmousedown 이벤트가 트리거되고, 마우스 버튼을 놓으면 onmouseup 이벤트가 트리거됩니다. 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 트리거됩니다.

간단한 onmousedown-onmouseup 예:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <meta charset="utf-8"> <body> <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> <button onclick="displayDate()">试一试</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>

제출하다 코드 재설정

자동운전