JavaScript HTML DOM 이벤트

Event

이벤트는 클릭, 로드, 마우스 오버 등 사용자나 브라우저 자체가 수행하는 특정 동작을 의미하며 이벤트 이름입니다.

이벤트는 JavaScript와 DOM 사이의 다리입니다.

트리거하면 실행됩니다. 이벤트가 발생하면 해당 핸들러 함수가 호출되어 해당 JavaScript 코드를 실행하여 응답을 제공합니다.

일반적인 예는 다음과 같습니다. 페이지가 로드될 때 로드 이벤트가 트리거됩니다. 사용자가 요소를 클릭하면 클릭 이벤트가 트리거됩니다.

이벤트에 반응

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

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

onclick=JavaScript

HTML 이벤트의 예:

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

페이지에 로드할 때

이미지가 로드되었을 때

요소 위로 마우스를 이동할 때

입력 필드가 변경될 때

HTML 양식이 제출될 때

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</h1>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="displayDate()">点击</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<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>

onload 및 onunload 이벤트

onload 및 onunload 이벤트는 사용자가 페이지에 들어오거나 페이지를 떠날 때 시작됩니다.

onload 이벤트를 사용하면 방문자의 브라우저 유형과 브라우저 버전을 감지하고 이 정보를 기반으로 올바른 버전의 웹 페이지를 로드할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
    function load(){
        alert("页面加载完成");
      }
</script>
</head>
<body onload="load()">
</body>
</html>

onchange 이벤트

onchange 이벤트는 입력 필드의 유효성 검사와 함께 자주 사용됩니다.

<!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 요소 위나 밖으로 움직일 때 기능을 트리거하는 데 사용할 수 있습니다.

<!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:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠标请移动至此"
}
</script>
</body>
</html>

onmousedown, onmouseup 및 onclick 이벤트

onmousedown, onmouseup 및 onclick은 마우스 클릭 이벤트의 모든 부분을 구성합니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 발생하고, 마우스 버튼을 놓으면 onmouseup 이벤트가 발생하며, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 발생합니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
   function noNumbers(e)
    {
    var keynum;
    var keychar;
    keynum = window.event ? e.keyCode : e.which;
    keychar = String.fromCharCode(keynum);
    alert(keynum+':'+keychar);
    }
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>

기타 이벤트:

onmousedown 및 onmouseup
사용자가 마우스 버튼을 누르면 이미지가 변경됩니다.

onload
페이지 로딩이 완료되면 프롬프트 상자를 표시합니다.

onfocus
포커스가 있을 때 입력 필드의 배경색을 변경합니다.

마우스 이벤트
포인터가 요소 위로 이동하면 색상이 변경되고, 포인터가 텍스트 밖으로 이동하면 색상이 다시 변경됩니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function mouseOver() { document.getElementById('div1').style.border = "1px solid red"; } function mouseOut() { document.getElementById('div1').style.border = "1px solid white"; } </script> </head> <body> <div id="div1" style="width:300px;border:1px solid white;" onmouseover="mouseOver()" onmouseout="mouseOut()" > <p style="line-height:2em;text-align:center;">我是一些文字或者图片</p> </div> </body> </html>

제출하다 코드 재설정

자동운전