JavaScript
DOM Event
- 어떤 동작이나 사건이 발생했음을 알려주는 신호이다.(요소와 사용자 사이의 상호작용)
- Event Listener(이벤트 리스너) : 이벤트가 발생할 때 실행할 함수. 이벤트 핸들러(Event handler)라고도 한다.
참고) w3schools - HTML DOM Event Object
Event Listener 구현하기
- HTML 태그 안에 이벤트 속성을 정의한다.
<button onclick="nowDate()">현재 시간</button>- 이벤트 프로퍼티를 사용한다.
document.getElementById("myBtn").onclick = nowDate;Event Listener 추가/삭제하기
- addEventListener : 해당 객체에 이벤트를 추가한다.
- removeEventListener : 해당 객체에 추가되어 있던 이벤트를 제거한다.
addEventListener
- HTML요소에 이벤트를 적용할 수 있다.
요소.addEventListener(이벤트 이름, function() {
//이벤트가 일어났을 때 실행될 함수
});<body>
<p>안녕하세요</p>
<script>
document.querySelector("p").addEventListener("click",function(){
document.querySelector("p").style.color = "red";
});
</script>
</body>Key Event
- 키보드 이벤트
| 이벤트 | 설명 |
|---|---|
| keydown | 키가 눌릴 때 실행된다. 키보드를 계속 누르고 있을때, 입력될 때 모두 해당된다. |
| keypress | 키가 입력되었을 때 실행된다. 브라우저에 따라 한국어,중국어,일본어 등 아시아권의 문자를 제대로 처리못하기도 한다. |
| keyup | 키를 눌렀다가 뗄 때 실행된다. |
document.querySelector("p").addEventListener("keydown",function(){
//~~
});- HTML의
<input>과 같이 사용하는 경우가 많다.
Ghost Rain
HTML, CSS, JavaScript로 간단한 웹게임 만들기
- 2022.09.23 용사 움직임 추가, 유령 추가
GhostRain 깃허브 바로가기↗
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧