이벤트
- 이벤트란 브라우저에서 일어나는 모든 사건을 말한다. 이를테면 마우스 클릭, 키보드 입력, 스크롤 등이 될 수 있다.
=> 사용자가 일으키는 이벤트 뿐만 아니라 API가 생성하는 이벤트도 있다. eventListener를 통해 특정 이벤트에 대한 처리를 할 수 있다.
=> 특정 이벤트가 발생했을 때 인자로 받은 콜백함수를 실행한다.- 이벤트 타겟을 통해서 이벤트가 발생한 타겟에 대한 데이터를 활용할 수 있다
특정 이벤트에 대한 콜백 함수 등록
- 이벤트 타겟에게 특정 이벤트에 대한 콜백함수를 등록해 이벤트에 대한 처리를 할 수 있다.
- 인라인 방식의 이벤트 리스너 등록
- HTML 문서 내에서 태그의 이벤트 리스너 속성을 통해 직접 등록을 할 수 있다.
=> 가독성과 유지보수 측면에서 좋지 않다.
<div class="box" onclick="console.log('클릭!');"></div>.box {
width: 100px;
height: 100px;
border : 3px solid red;
}- 요소 노드의 이벤트 리스너 속성에 콜백함수 직접 지정
onclick과 같은 요소가 가지고 있는 이벤트 속성에 실행할 콜백 함수를 직접 지정한다.- 콜백 함수 지정 후 새로운 함수를 또 지정하면 덮어씌워진다.
<div class="box"></div>.box {
width: 100px;
height :100px;
}let box = document.querySelector(".box");
// box 요소에 클릭 이벤트 발생시 색상을 변경하는 console 창에 "클릭!"을 출력하는 콜백 함수 등록
box.onclick = function() {
console.log("클릭!");
}
// "클릭"이라는 문구와 함께 경고창을 띄우는 콜백함수 등록
// 뒤에 작성된 이 콜백함수만 실행
box.onclick = function() {
alert("클릭!");
}addEventListener함수를 이벤트에 콜백함수 지정
addEventListener의 첫번째 인자로 처리할 이벤트를 문자열로, 두번째 인자로는 처리할 코드를 콜백함수로 지정한다.- 같은 이벤트에 대해서
addEventListener실행 시 덮어씌우는 것이 아니라 중복 적용된다.
let box = document.querySelector(".box");
// box 요소에 클릭 이벤트 발생시 색상을 변경하는 console 창에 "클릭!"을 출력하는 콜백 함수 등록
box.addEventListener("click", function() {
console.log("클릭!);
});
// "클릭"이라는 문구와 함께 경고창을 띄우는 콜백함수 등록
// addEventListener이기 때문에 위의 콜백함수와 함께 둘다 실행
box.addEventListener("click", function() {
alert("클릭!");
});4.removeEventListener
- 이벤트 리스너로 등록돼 있는 콜백함수를 삭제할 때 사용한다.
- 삭제할 콜백함수를 참조해야되기 때문에
addEventListener로 등록 시 기명함수로 등록돼 있어야 한다. - 첫번째 인자로 이벤트의 종류, 두번째 인자로 삭제할 콜백함수를 받는다.
- 성능 최적화를 위해서 삭제해야할 때 사용한다.
let box = document.querySelector(".box");
// box 요소에 클릭 이벤트 발생시 색상을 변경하는 console 창에 "클릭!"을 출력하는 콜백 함수 등록
function concoleClick() {
console.log("click");
}
// 기명함수 형태로 클릭 이벤트에 대한 콜백함수를 지정
box.addEventListener("click", concoleClick);
// 클릭 이벤트에 지정되어 있는 concoleClick 콜백함수 삭제
box.removeEventListner("click", concoleClick);
// consolClick 콜백함수가 이벤트 리스너에서 삭제됐기 때문에 밑의 코드만 실행
box.addEventListener("click", function() {
alert("클릭!");
});Event 객체
- 발생한 이벤트에 대한 프로퍼티와 메서드를 담고 있는 객체이다.
- 이벤트 리스너에 등록된 콜백함수의 첫번째 인자로 자동으로 전달된다.
let box = document.querySelector(".box");
// click 이벤트에 등록된 콜백함수의 첫번째 인자로 Event 객체 전달
box.addEventListner("click", function(e) {
console.log(e); // 이벤트와 관련된 프로퍼티 및 메서드 출력
}이벤트 타겟
- 이벤트가 등록되어있는 대상 요소를 말한다.
- 이벤트 발생 시 대상 요소의 프로퍼티 및 메서드를 참조할 때 사용한다.
- 이벤트 리스너가 등록된
event.currentTarget과 실제 이벤트 대상인event.target은 다른 개념이다.
=> 이벤트는 기본적으로 자식요소부터 상위요소로 전파되는 버블링 단계를 거친다.
<div class="container">
<class class="box">
<p>
p 태그입니다.
</p>
</div>
</div>let container = document.querySelector(".container");
container.addEventListener("click", function(e){
console.log("이벤트 타겟 : ", e.target);
console.log("현재(실제) 타겟 : ", e.currentTarget);
})이벤트 위임
- 상위 요소에 이벤트를 등록 후 자식 요소에서 이벤트 발생시 이벤트가 전파되기 때문에 이벤트를 관리할 수 있다.
- 동적으로 요소 생성된 요소에 addEventListener를 하지 않으면 이벤트를 감지 할수 없다.
=> 이벤트 위임을 통해서 동적으로 추가된 요소에 대한 이벤트 처리까지 가능하다. Element.matches()메서드를 통해 분기처리를 할 수 있다.
=> 입력된 css 선택자와 일치하는지를true,false를 반환한다.
