DOM 이벤트
HTML DOM은 JavaScript가 HTML 이벤트에 반응하는 기능을 제공합니다.
이벤트에 반응
사용자가 HTML 요소를 클릭하는 등 이벤트가 발생할 때 JavaScript를 실행할 수 있습니다.
사용자가 요소를 클릭할 때 코드를 실행하려면 HTML 이벤트 속성에 JavaScript 코드를 추가하세요.
HTML 이벤트의 예:
사용자가 마우스를 클릭할 때
웹페이지가 로드될 때
이미지가 로딩되었을 때
요소 위에 마우스를 올렸을 때
입력 필드가 변경되었을 때
HTML 양식이 제출될 때
사용자가 키 누르기를 실행할 때
여기서 예를 들어, 사용자가 <h1> 요소를 클릭하면 해당 내용이 변경됩니다:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이 예에서는 이벤트 핸들러에서 함수를 호출합니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
HTML 이벤트 속성
HTML 요소 이벤트에 할당하려면 이벤트 속성을 사용할 수 있습니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</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 요소에 이벤트를 할당할 수 있습니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</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 요소를 지정합니다.
버튼을 클릭하면 Javascript 기능이 실행됩니다.
onload 및 onunload 이벤트
onload onunload 이벤트는 사용자가 페이지에 들어오거나 나갈 때 트리거됩니다.
onload 이벤트를 사용하면 방문자의 브라우저 유형과 브라우저 버전을 감지하고 이 정보를 기반으로 올바른 페이지 버전을 로드할 수 있습니다. onunload 이벤트를 사용하여 쿠키를 처리할 수 있습니다.
인스턴스<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</p>
</body>
</html>
인스턴스 실행»"인스턴스 실행"을 클릭합니다. 온라인으로 보려면 버튼을 누르세요
onchange 이벤트
onchange 이벤트는 입력 필드의 유효성 검사와 함께 사용되는 경우가 많습니다.
다음은 onchange 사용 방법의 예입니다. 사용자가 입력 필드의 내용을 변경하면 upperCase() 함수가 호출됩니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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 이벤트는 사용자의 마우스가 HTML 요소 위나 밖으로 움직일 때 기능을 트리거하는 데 사용할 수 있습니다.
예
간단한 onmouseover-onmouseout 예:
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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 and onclick 마우스 클릭 이벤트의 모든 부분을 구성합니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 발생하고, 마우스 버튼을 놓으면 onmouseup 이벤트가 발생하며, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 발생합니다.
예
간단한 onmousedown-onmouseup 예:
더 많은 예시
onmousedown 및 onmouseup
사용자가 마우스 버튼을 누르면 이미지가 변경됩니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function lighton(){
document.getElementById('myimage').src="/upload/course/000/000/009/5804353cb2562758.gif";
}
function lightoff(){
document.getElementById('myimage').src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
onload
페이지 로딩이 완료되면 프롬프트 상자를 표시합니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>
<body onload="mymessage()"></body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
onfocus
포커스가 있을 때 입력 필드의 배경색을 변경합니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
마우스 이벤트
포인터가 요소 위로 이동하면 색상이 변경되고, 포인터가 텍스트 밖으로 이동하면 색상이 다시 변경됩니다.
