2022. 7. 15. 23:09ㆍWEB/Javascript
이벤트
- 브라우저에서 이벤트란 사용자가 버튼을 누르거나 키를 누르거나 웹페이지가 로드되었을때 등 을 말한다. 이것은 DOM 요소와 관련이있다.
- 브라우저는 이벤트를 감지하고 통지함으로써 사용자와 웹페이지 간의 상호작용이 가능해진다.
이벤트 핸들러
- 이벤트가 발생하면 그에 맞는 반응이 필요하다. 이를 위해 일반적으로 '함수'와 연결하며 '이 함수'는 이벤트가 발생할 때만 실행된다. '이 함수'를 '이벤트 핸들러' 라고 정의한다.
이벤트 리스너
- 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 처럼 상위요소에서 하위 요소의 이벤트를 제어하는 방식을 사용할 때 쓴다.
콜백
- 단어 그대로 call back, 사용자에게 다시 알려주는 것. 기능사용자가 등록한 함수를 말한다.
이벤트 객체
- DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있다.
- DOM 표준을 준수하는 브라우저에서 이벤트 핸들러에 전달되는 매개변수는 event객체 하나뿐이다.
- DOM레벨과 상관없이 event객체가 전달되며 event객체에는 생성에 관여한 이벤트와 관련된 프로퍼티 및 메서드가 포함된다.
var btn = document.getElementById("myBtn");
btn.onclick = function(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>이벤트 동시성
'WEB > Javascript' 카테고리의 다른 글
| [JavaScript] 프로토타입 (prototype) (0) | 2022.07.20 |
|---|---|
| [JavaScript] This, new 키워드 (0) | 2022.07.16 |
| [JavaScript] DocumentFragment 장점 (0) | 2022.07.15 |
| [JavaScript] DOM(Document Objecet Model) (0) | 2022.07.14 |
| [JavaScript] 배열, 객체 (0) | 2022.07.14 |