HTML DOM은 자바스크립트로 하여금 HTML 이벤트 발생에 대응하도록 해줍니다.
예를 들면 마우스 hover시 어떻게 동작하는지, 클릭시 어떻게 동작하는지, 키보드에 뭔가 입력시에 어떻게 동작하는지, 윈도우가 작아질때 resize에 대해서 어떻게 동작하는지 등등이 있습니다.
onclick=""클릭 이벤트에선 위와같은 자바스크립트 코드를 HTML 이벤트 속성에 추가해줘야 하는데요.
함수를 넣고 <script>에서 따로 구현해주는 방법도 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html> 이렇게 하는 방법도 있고,
HTML 코드쪽에선 아무것도 이벤트를 정해주지 않고, script에서 모든 이벤트를 지정하는 만드는 방법도 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
대체적으로 버튼에선 onclick을 주로 쓰고, 그외에 찾아보면 onmouseover, onmouseout, onmousedown, onmouseup 등이 있습니다.
input은 onchange를 가장많이 씁니다.
코딩의 고수가 되고 싶은 종한이