HTML DOM - 이벤트
HTML DOM을 사용하면 JavaScript가 HTML 이벤트에 반응할 수 있습니다.
이벤트에 반응
JavaScript는 사용자가 HTML 요소를 클릭하는 등 이벤트가 발생할 때 실행될 수 있습니다.
사용자가 요소를 클릭할 때 코드를 실행하려면 HTML 이벤트 속성에 JavaScript 코드를 추가하세요:
HTML 이벤트의 예:
사용자가 마우스를 클릭할 때
웹 페이지가 로드되었을 때
이미지가 로드되었을 때
요소 위에 마우스를 올렸을 때
입력 필드가 변경되었을 때
HTML 양식이 제출되었을 때
사용자가 키 누르기를 실행하면
이 예에서 사용자가 클릭하면 <h1> 요소의 내용이 변경됩니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이 경우 함수는 이벤트 핸들러에서 호출됩니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하세요. 온라인 인스턴스를 보려면
HTML 이벤트 속성
이벤트를 HTML 요소에 할당하려면 이벤트 속성을 사용할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button onclick="displayDate()">Try it</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Run Instance »
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
위의 예에서 버튼을 클릭하면 displayDate라는 함수가 실행됩니다.
HTML DOM을 사용하여 이벤트 할당
HTML DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있습니다.
Instance
<html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn">Try it</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 이벤트를 사용하여 방문자의 브라우저 유형과 버전을 확인하여 이 정보를 기반으로 다양한 버전의 웹페이지를 로드할 수 있습니다.
<html><!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>인스턴스 실행»
onchange 이벤트
onchange 이벤트는 입력 필드 유효성 검사에 자주 사용됩니다.
다음 예에서는 onchange를 사용하는 방법을 보여줍니다. 사용자가 입력 필드의 내용을 변경하면 upperCase() 함수가 호출됩니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
onmouseover 및 onmouseout 이벤트
onmouseover 및 onmouseout 이벤트를 사용하여 마우스 포인터가 요소 기능으로 이동하거나 요소 기능에서 멀어집니다.
Instance
<html><!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
onmousedown, onmouseup 및 onclick 이벤트
onmousedown, onmouseup 및 onclick 이벤트는 마우스 클릭. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 트리거되고 마우스 버튼을 놓으면 onmousedown 이벤트가 트리거됩니다. onmouseup 이벤트, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 트리거됩니다.
Example
<html><!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
HTML DOM 이벤트 개체 참조 매뉴얼
각 이벤트에 대한 전체 설명과 예를 보려면 다음을 확인하세요. HTML DOM 참조 매뉴얼을 방문하세요.
