JavaScript로 이벤트 처리 하기
2019. 9. 23. 12:43
웹 페이지에서 사용자와의 상호작용이 발생하면 이벤트가 일어납니다.
이벤트가 발생했을 때, 특정한 동작을 만들기 위해 자바스크립트를 사용합니다.
몇가지 이벤트의 종류
- onclick : 클릭 이벤트가 발생했을 때 미리 정해놓은 코드가 실행되도록 할 수 있습니다.
- onload, onunload : 사용자가 웹 페이지에 진입하거나 웹페이지를 떠나면 onload와 onunload가 발생합니다.
- onchange : 해당 요소에 변화가 발생했을 때 정해놓은 코드가 실행되도록 합니다.
- onmouseover : 사용자가 요소 위에 마우스를 올리면 발생합니다.
이벤트 리스너 (Event listener)
이벤트가 발생했을 때 처리를 담당하는 함수입니다.
특정한 이벤트가 발생했을 때, 브라우저는 해당 요소에 지정된 이벤트를 실행시킵니다.
이벤트 리스너를 사용하기 위해서는 작성된 이벤트를 특정 요소에 등록해야 합니다.
이벤트의 등록 방법
1. inline
이벤트를 태그의 속성으로 지정하는 방식입니다.
<input type="button" value="버튼" onclick="alert(this.value + ' 클릭!')"><!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<input type="button" value="버튼" onclick="showEvent()">
<script>
function showEvent() {
alert("이벤트 발생!");
}
</script>
</body>
</html>
2. 프로퍼티 리스너
프로퍼티 리스너는 이벤트를 적용할 객체의 property로 이벤트를 적용합니다.
이 방식의 단점은 하나의 요소에 이벤트를 하나밖에 적용할 수 없다는 것입니다.
window.onload = function() {
document.write("HTML 문서가 로드되었습니다");
}<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<input type="button" value="버튼" id="target">
<script>
document.getElementById("target").onclick = function() {
alert("버튼 클릭!!");
}
</script>
</body>
</html>
3. addEventListener()
addEventListner()를 사용하면 하나의 요소에 대해 여러개의 이벤트를 등록할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<input type="button" value="버튼" id="target">
<h1 id="text"></h1>
<script>
var target = document.getElementById("target");
var text = document.getElementById("text");
target.addEventListener("click", function() {
alert("버튼 클릭!!");
})
target.addEventListener("mouseover", onMouseOver);
target.addEventListener("mouseout", onMouseOut);
function onMouseOver() {
document.getElementById("text").innerText = "마우스가 올라갔어요"
}
function onMouseOut() {
document.getElementById("text").innerText = "마우스가 빠져나갔어요"
}
</script>
</body>
</html>
참고 링크
'if (study) > JavaScript' 카테고리의 다른 글
| JavaScript로 HTML 요소를 찾고 변경하기 (0) | 2019.09.22 |
|---|---|
| HTML 문서가 표현되는 방법, DOM의 개념 (0) | 2019.09.22 |
| HTML에서 JavaScript를 실행하기 (0) | 2019.09.22 |
