728x90
반응형
Event
- Event는 어떤 사건을 의미
- 예를들어 브라우저에서의 이벤트란 사용자가 버튼을 클릭했을 때, 웹 페이지에 로드되었을 떄와 같은 것인데 DOM 요소와 관련이 있음
- 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요함. 즉 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 함
Event Handler
- 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생하면 실행되게끔 하는 함수
이벤트 종류
- click, load, keyPress, keyUp, change 등
이벤트 핸들링 방법
- 이벤트 핸들링 방법은 세 가지가 있음
인라인 이벤트 핸들링
- html 코드에 직접 js 코드 삽입
- 이 방식은 과거에는 사용했지만 현재 더 이상 사용되지 않으며 사용해서도 안됨(간혹 레거시 코드에서이 방식을 사용한 것이 있기 때문에 알아둘 필요는 있음)
- CBD(Component Based Development) 방식의 Angular/React/Veu.js와 같은 프레임워크/라이브러리에서는 인라인 이벤트 핸들러 방식으로 이벤트를 처리함
- onClick과 같이 on으로 시작하는 이벤트 어트리뷰트의 값으로 함수 호출을 전달
<!DOCTYPE html>
<html>
<body>
<button onclick="myHandler()">Click me</button>
<script>
function myHandler() {
alert('Button clicked!');
}
</script>
</body>
</html>이벤트 핸들러 프로퍼티 방식
- 인라인 이벤트 핸들러 방식처럼 HTML과 JS가 뒤섞이는 문제를 해결할 수 있는 방식
- 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩할 수 있다는 단점이 있음
- 하나의 btn에 이벤트 핸들러 프로퍼티 방식으로 두 개의 이벤트 핸들러를 바인딩 했을 때, 아래쪽에 위치한 이벤트 핸들러만 동작함
- ex) button 태그 내의 onClick 프로퍼티 내에 삽입
<html>
<body>
<button class="btn">Click me</button>
<script>
const btn = document.querySelector('.btn');
// 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다
// 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
btn.onclick = function () {
alert('① Button clicked 1');
};
// 두번째 바인딩된 이벤트 핸들러
btn.onclick = function () {
alert('① Button clicked 2');
};
</script>
</body>
</html>addEventListener 메소드 방식
- addEventListener 메소드를 이용해 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있음
- 캡처링과 버블링을 지원
- IE 9 이상에서 동작함
- HTML 요소 뿐만 아니라 모든 DOM 요소(HTML, XML, SVG)에 대해 동작
- 브라우저는 웹 문서(HTML, XML, SGV)를 로드한 후 파싱하여 DOM 생성
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click me</button>
<script>
const btn = document.querySelector('.btn');
// addEventListener 메소드 방식
// 첫번째 바인딩된 이벤트 핸들러
btn.addEventListener('click', function () {
alert('② Button clicked 1');
});
// 두번째 바인딩된 이벤트 핸들러
btn.addEventListener('click', function () {
alert('② Button clicked 2');
});
</script>
</body>
</html>728x90
반응형
