11. 이벤트

이벤트란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건을 말합니다.

 

예시)

• 어떤 요소 위에 마우스 커서를 올릴 때
• 키보드에서 키를 누를 때
• 브라우저 창의 크기를 재조정하거나 닫을 때
• 웹 페이지가 로딩을 완료할 때
• form에서 양식을 제출할 때
• 오류가 발생했을 때 등..

 

 

이벤트 등록하기

• 인라인 (Inline) : 이벤트 대상의 HTML 요소에 직접 등록합니다.

<!-- HTML -->
<button onclick="alert('hello ' + this.value);" value="world">인라인</button>

 

• 프로퍼티 리스너 (Property Listener) : 이벤트 대상이 되는 HTML 요소의 객체에 프로퍼티로 이벤트를 등록합니다.

<!-- HTML -->
<button id="btn1">프로퍼티 리스너</button>

//Javascript
const btn1 = document.getElementById('btn1')

btn1.onclick = function () {
  alert('hello');
}

 

• addEventListener() : 이벤트 대상이 되는 HTML 요소의 객체에 addEventListener를 사용하여 이벤트를 등록합니다. 가장 권장되는 방식이며, 하나의 이벤드 대상 요소에 여러개의 이벤트를 등록할 수 있습니다.

<!-- HTML -->
<button id="btn2">AddEventListener</button>

//Javascript
const btn2 = document.getElementById('btn2')

btn2.addEventListener('click', function() {
  alert('hello');
});

btn2.addEventListener('click', function() {
  alert('world');
});

 

 

이벤트 제거하기

• removeEventListener : addEventListener 로 등록했던 이벤트를 제거합니다.

//Javascript
const btn2 = document.getElementById('btn2')

btn2.addEventListener('click', event1); // 함수명으로 넣어줘야 제거 가능
function event1() {
	alert('hello');
}

btn2.removeEventListener('click', event1); // event1 이벤트 제거

 

 

이벤트 종류

마우스 이벤트

• click : 마우스가 요소를 클릭했을 때
• mousedown : 마우스가 요소안에서 클릭이 눌릴 때
• mouseup : 마우스가 요소안에서 클릭이 해제될 때
• mouseover : 마우스가 요소 안으로 진입 했을 때(자식 요소까지)
• mouseenter : 마우스가 요소 안으로 진입 했을 때(해당 요소만)
• mouseout : 마우스가 요소 밖깥으로 나갔을 때(자식 요소까지)
• mouseleave : 마우스가 요소 밖깥으로 나갔을 때(해당 요소만)
• mousemove : 마우스가 요소 안에서 움직일 때

<!-- HTML -->
<div id="event">
  <div id="eventChildren"></div>
</div>

//CSS
#event {
  background-color: gray;
  width: 300px;
  height: 150px;
}

#eventChildren {
  background-color: black;
  width: 150px;
  height: 150px;
}

//Javascript
let event = document.getElementById('event');

event.addEventListener('click', function() {
	alert('hello');
});

 

 

키보드 이벤트

• keydown : 키를 눌렀을 때
• keyup : 키를 떼었을 때
• keypress : 키를 누른 상태

 

폼 이벤트

• focus : 포커스가 이동되었을 때
• blur : 포커스가 벗어났을 때
• change : 요소에 값이 변경 되었을 때
• submit : 양식(Form)을 제출할 때 전송전(주로 전송될 값을 유효성 체크할 때 사용합니다.)

<!-- HTML -->
<h2>input</h2>
<input type="text" id="event2">

//Javascsript
let event2 = document.querySelector('#event2');

event2.addEventListener('keydown', function() {
	alert('hello');
});

 

 

진행 이벤트

• load : 페이지의 로딩이 완료되었을 때
• error : 에러가 발생했을 때
• resize : 요소의 사이즈가 변경 되었을 때
• scroll : 스크롤바를 움직였을 때

<!-- HTML -->
<h2>iamge</h2>
<img src="image.jpg" alt="이미지">

//Javascript
window.addEventListener('load', function() {
	console.log('load!!!!!!!!!!');
});

let event3 = document.querySelector('img');
event3.addEventListener('error', function() { 
	console.log('error!!!!!!!!!!!'); // defer -> async 바꿔줘야 뜸
});