이벤트
-
브라우저에서의 이벤트란 사용자가 버튼을 누르거나 키를 누르거나 웹페이지가 로드되었을때 등 사용자의 행위에 따라 발생하는 현상을 말한다.
-
브라우저는 이벤트를 감지하고 통지함으로써 사용자와 웹페이지 간의 상호작용이 가능해진다.
이벤트 핸들러
- 이벤트가 발생하면 그에 맞는 반응이 필요하다. 이를 위해 일반적으로
함수와 연결하며이 함수는 이벤트가 발생할 때만 실행된다. '이 함수'를이벤트 핸들러라고 정의한다.
이벤트 리스너
-
DOM 객체에서 이벤트가 발생할 경우 해당 이벤트를 처리할 핸들러를 추가할 수 있는 오브젝트를 말한다.
-
이벤트 리스너는 javascript이벤트가 발생할 때 사용자가 등록한 함수를 호출한다.
-
이벤트 흐름
- 사용자 -> 브라우저 -(알림)-> 이벤트리스너 -> 콜백함수 호출 -> 사용자
이벤트, 리스너의 종류
https://developer.mozilla.org/en-US/docs/Web/Events
이벤트 버블링
- 자식요소에 의한 이벤트가 부모 요소에게도 전달되는 것을 말한다.
<div id="first"> <div id="second"> <div id="third"> </div> </div> </div>-
div#third를 클릭한경우 second first 순으로 같은 클릭 이벤트가 일어난다.
-
addEventListener의 capture프로퍼티를 이용하여 capture, bubbling을 선택할수 있다.
-
delegate 처럼 상위요소에서 하위 요소의 이벤트를 제어하는 방식을 사용할 때 쓴다.
버블링 막는 방법
onClick={(e) => e.stopPropagation()}콜백
- 단어 그대로 call back, 사용자에게 다시 알려주는 것. 기능사용자가 등록한 함수를 말한다.
이벤트 객체
- DOM에 브라우저 대한 이벤트를 연결한 함수(이벤트 리스너)는 이벤트 객체를 매개변수로 사용할 수 있다.
- DOM 표준을 준수하는 브라우저에서 이벤트 핸들러에 전달되는 매개변수는 event객체 하나뿐이다.
- DOM레벨과 상관없이 event객체가 전달되며 event객체에는 생성에 관여한
이벤트와 관련된 프로퍼티및메서드가 포함된다. - event를 발생시킨 요소와 해당 이벤트에 대한 정보를 가진다.
var btn = document.getElementById("myBtn");
btn.onclick = function(event){ // event 객체를 매개변수로 전달
console.log(event.type); //click
};
btn.addEventListener("click", function(event){
console.log(event.type); //click
}, false);-
preventDefault(태그의 기본 동작실행방지), stopPropagation(태그클릭시 부모에게 이벤트 전달 방지(버블링방지))), stopImmediatePropagation(버블링을 막고 같은 이벤트 리스너도 실행막음)등이 있다.
-
event.target안에 발생한 태그도 알수있고 ,pageX pageY로 클릭한 좌표도 알수 있고 event.key로 어떤 키를 입력했는지 알수 있다.
이벤트 핸들러 등록
- 이벤트가 발생했을 때 동작할 이벤트 핸들러를 이벤트에 등록하는 방법 3가지
- 관심사 분리를 고려 했을 때 addEventListener 방식을 추천
1) 인라인 방식 - HTML Attribut에 등록
<태그명 on이벤트 = 자바스크립트 코드> </태그명>
<div onclick="alert('Clicked1')">클릭</div>
<div onclick="view()">클릭</div>
<div onclick="view(); view2();">클릭</div> //이벤트 핸들러의 함수호출 문이므로 여러개 전달가능
<script>
function view() {
alert("Clicked2");
}
function view2(){
alert("Clicked3")
}
</script>2) 이벤트 핸들러 프로퍼티 방식
[1]
객체.on이벤트명 = function() {
}
[2]
function 함수명() {
}
객체.on이벤트명 = 함수명
<div id="bt">클릭</div>
//이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만 바인딩할 수 있다.
//버튼 클릭시 마지막에 등록한 이벤트만 실행됨을 알수있다.
<script>
var bt = document.getElementById("bt");
bt.onclick = () => {
alert("clicked1");
};
var bt = document.getElementById("bt");
function view() {
alert("clicked2");
}
bt.onclick = view;
</script>3) addEventListener 메소드 방식
-
addEventListener 메소드를 이용하여 대상 요소에 이벤트를 바인딩하고 해당 이벤트가 발생 했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.
-
하나의 이벤트에 대해 하나이상의 이벤트 핸들러를 추가할 수 있다.
-
캡처링과 버블링을 지원한다.
-
target을 지정하지 않으면 전역객체 (window)에 바인딩 된다.
-
addEventListener 메소드의 세번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 캐치하고 false 또는 미설정하면 버블링으로 전파되는 이벤트를 캐치한다.
<head>
...
<script>
addEventListener("load", ()=> {alert(loaded!)})
</script>