[JAVASCRIPT] addEventListener()

addEventListener()는 documnet 요소에 event를 부여할 때 사용.

addEventListener(event, 실행할 함수) 로 정의한다. 총 3가지의 방법으로 정의할 수 있다.

1. button.addEventListener('이벤트', 함수명)
2. button.addEventListener('이벤트', 익명함수정의);
3. button.addEventListener('이벤트', ()=>{});

대부분 화살표 함수를 사용하여 정의한다.

var button = document.getElementById('btn');

function clickButton() {
    alert("버튼을 클릭하였습니다.");
}

// case 1
button.addEventListener('click', clickButton);
// case 2
button.addEventListener('click', function() {
    alert("버튼을 클릭하였습니다.");
});
// case 3
button.addEventListener('click', ()=> {
    alert("버튼을 클릭하였습니다.")
})

자주 사용하는 이벤트의 종류

* UI Event *

1. load: 페이지가 가지고 있는 모든 요소(이미지, 스크립트 및 광고)가 전부 로드되었을때만 발생함.window.addEventListener('load', setup, false);
2. unload: 웹 페이지가 언로드될 때 다른 페이지로 이동하거나 탭을 닫을 때 발생함.
3. error: 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 발생함.
4. scroll: 스크롤바를 드래그하거나 키보드, 마우스휠로 스크롤 할 때 발생함. 전체 페이지 뿐만 아니라 특정 요소(스크롤바 가진 textarea)에서도 적용

* KeyBoard Event *

1. input: input/textarea요소 값이 변경될 때 발생함.
2. keydown: 사용자가 키를 처음 눌렀을 때 (키가 눌린 동안은 계속해서 발생함)
3. keypress: 사용자가 눌렀던 키의 문자가 입력되었을 때 발생함.
4. keyup: 키보드 키 눌렀다 뗄 때. 화면에 문자가 나타난 이후에 발생함.

* Mouse Event *

1. click: 마우스 버튼을 눌렀다 뗄 때 발생함.
2. mouseover: 요소 위로 마우스를 움직였을 때 발생함.
3. mouseout: 요소 바깥으로 마우스를 움직였을 때 발생함.
4. mouseup: 눌렀던 마우스 버튼을 뗄 때 발생함.
5. mousedown: 마우스 버튼을 누르고 있을 때 발생함.

* Focus Event *

1. focus: 해당 HTML 요소가 포커스를 얻었을 때 발생함.
2. blur: 해당 HTML 요소가 포커스를 잃었을 때 발생함.

click

See the Pen click by HOYOUNG JUNG (@ghrnwjd) on CodePen.

mouseover, mouseout

See the Pen js mouseover mouseout by HOYOUNG JUNG (@ghrnwjd) on CodePen.

focus, blur

See the Pen js focus/blur by HOYOUNG JUNG (@ghrnwjd) on CodePen.

keydown

See the Pen js keydown by HOYOUNG JUNG (@ghrnwjd) on CodePen.

scroll

See the Pen Untitled by HOYOUNG JUNG (@ghrnwjd) on CodePen.

change

See the Pen js change by HOYOUNG JUNG (@ghrnwjd) on CodePen.

참고자료

http://milooy.github.io/TIL/JavaScript/event.html#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%8C%E1%85%A9%E1%86%BC%E1%84%85%E1%85%B2

Javascript Event | Today Yurim Learned

https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/

JavaScript - addEventListener 사용법, js, html, css, 웹개발, 개발자, 프론트엔드, 백엔드, web