Event
이벤트는 어떤 사건을 의미한다.
우리가 버튼을 클릭하거나 마우스를 움직이는 등의 사건이 발생할 때 이벤트가 발생했다고 한다.
이벤트를 등록하는 방식은 속성 추가 방식(onclick)과 이벤트 리스너(Event Listener) 방식이 있다.
✔ 자주 사용하는 이벤트
onchange: html 문서가 변경이 있을 경우 작동 (ex. select 변경 등)onclick: 클릭 시onmouseover: 마우스가 위로 올라왔을 경우onmouseout: 마우스가 특정 영역을 벗어 났을 경우onkeydown: 키가 눌렀을 경우onload: 브라우저가 모든 페이지를 로딩한 후
이렇게 클릭을 해야만 어떤 이벤트가 발생하는 것을 이벤트트리커? 라고 한다.
Event 객체와 this
이벤트가 발생할 경우 이벤트 객체가 반환되고, 이벤트가 발생한 당사자 요소인 this가 있다.
Event : 발생한 이벤트에 대한 모든 정보를 담고 있는 객체 (이벤트 자체에 대한 객체)
this : 이벤트가 발생한 당사자 요소를 담고 있는 객체 (이벤트를 당한 자신의 객체)
this 키워드는 이벤트 함수 내부에서 this키워드를 사용하면 이벤트가 발생한 요소를 바로 가리킬 수 있다.
(※ 단 화살표 함수 일때는 이벤트 객체의 target 속성으로 참조해야 한다.)
그렇다면 이벤트를 발생시키고 이벤트 객체화 this를 확인해보자.
아래 코드를 살펴보면 button 에는 onclick 이벤트가 있고, 2번째에는 this 키워드가 작성되어 있다.
<hteml>
<head>
<title>DOM SCRIPT</title>
<meta charset="UTF-8">
</head>
<body>
<!--발생한 이벤트에 대한 정보-->
<button onclick="arg1(event)">button 1</button>
<!--이벤트가 발생된 당사자에 대한 정보-->
<button onclick="arg1(this)">button 2</button>
<p><a href="#" onclick="">click 3</a></p>
<p><a href="#" onclick="">click 4</a></p>
</body>
<script>
function arg1(obj){ // obj 라는 매개변수를 받는다
console.log(obj);
}
</script>
</hteml>위 코드를 실행하면 아래와 같은 정보를 볼 수 있다.
1) 이벤트에 대한 정보
2) 이벤트가 발생한 객체
Event Listener
이벤트 리스너는 특정 요소에 특정 이벤트를 감시하는 기능을 추가하는 개념이다.
(이벤트가 일어나는지 감시하는 역할을 부여하는 것)
사용 방법은 아래와 같다.
1) 어떤 이벤트를 감시할 것인지 (클릭, 체인지 등)
2) 이벤트가 실행되었을 때 어떤함수를 실행해라
element.addEventListener("event", function) → (이벤트명, 함수명)
여기서 사용되는 이벤트는 속성에 추가한 이벤트에서 on만 빠진 형태이다.
✔ 자주 사용되는 이벤트
click 클릭
dblclick 더블클릭
mousedown 마우스 버튼을 눌렀을 때
mouseup 마우스 버튼을 떼었을 때
mouseover 마우스 오버
mousemove 마우스가 움직일 경우
mouseenter 마우스가 특정 영역 진입 시
mouseout 마우스가 특정 영역 이탈 시
keyup 키를 눌렀다 떼는 순간 발생
keydown 키를 눌렀을 시
mousemove에 나오는 좌표는 내 마우스 포인트를 따라 움직이는 이벤트, 게임에서 위치를 찍으면 움직이는 등에 활용한다.
(스크린은 전체 모니터 화면, clientX/Y - 브라우저 크기에 따라, 페이지 - html 페이지(우리가 페이지에 들어갈 경우 스크롤이 생기는 경우가 있는데, 이렇게 스크롤 까지 포함한 총 크기가 html 페이지 크기이다.) => 그래서 일반적으로 clinet 로 찍는다.
그렇다면 이벤트 리스너를 사용한 코드를 살펴보자.
먼저 body에 뼈대를 만들어준다. (각 요소에 이벤트 지정을 위해 id를 지정해준다.)
<body>
<h4 id="msg">FOCUS NULL</h4>
<p><input type="text" id="txtinput"/></p>
<div id="eventZone"></div>
<h4>mouse position : <span id="pos"></span></h4>
</body>이후 이벤트 리스너를 만드는 코드를 작성해준다.
먼저 작성을 편하게 하기 위해서 위에서 작성한 요소들을 가져와 변수에 담아준다.
<script>
var msg = document.getElementById('msg');
var txtinput = document.getElementById('txtinput');
var eventZone = document.getElementById('eventZone');
var pos = document.getElementById('pos');
txtinput.addEventListener('focusin', fcsin); // 이벤트명, 실행 함수
// fcsin 함수 생성
function focsin(evt){
console.log('해당 요소에 포커스 됨');
console.log(this);
// input 요소에 포커스를 받으면 h3 요소의 값을 변경
msg.innerHTML = 'FOCUS IN';
}
</script>※ 이벤트 리스너에는 this를 바로 사용할 수 있다.
이렇게 위 코드처럼 별도의 함수를 만들어서 사용할 수도 있지만, 만약 1회만 실행되는 경우라면 이벤트 리스너 안에 익명함수를 선언해서 사용해 줄 수도 있다.
❗ 그렇다면 익명 함수를 활용해 키보드 엔터를 누를 때 이벤트가 발생하도록 이벤트리스너를 사용해보자!
txtinput.addEventListener('keyup', function(evt){
console.log(evt);
if(evt.keyCode == 13){
alert('전송 하였습니다.');
}
});※ 특정 키를 사용하는 방법
.keyCode(아스키 코드 사용).key(문자열 사용).window.event.keyCode(풀네임)
