Javascript - addEventListener method
최대 1 분 소요
Javascript - addEventListener method
- html의 특정 요소에 특정한 event(ex: 마우스 클릭)가 발생했을 때 특정한 동작이 수행되도록 하는 방법을 정리합니다.
- 다음은
element에 마우스 클릭이 발생하면 console.log를 해주는 코드입니다.
element.addEventListener(
"click",
function() {
console.log("Mouse Clicked");
}
)
DOM Events
- 다음과 같은 Event들이 있습니다. 자세한 건 mozilla - developer - Web events에서 볼 수 있습니다.
- mouse event는 다음과 같습니다.
click: 마우스 왼쪽 버튼을 눌렀을 때contextmenu: 마우스 오른쪽 버튼을 눌렀을 때dblclick: 왼쪽 마우스 버튼을 두 번 눌렀을때
- Keyboard event는 다음과 같습니다.
keydown: 키보드의 어떤 버튼이라도 눌렀을 때keyup: 버튼을 눌렀다가 뗄 때
Example
- 아래는
#p1 개체에 click하면 파란색으로 색깔이 바뀌도록 설정한 html 문서입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<p id="p1">This is Paragraph</p>
<script>
document.querySelector("#p1").addEventListener(
"click",
function() {
this.style.color = 'blue';
}
);
</script>
</body>
</html>
댓글남기기