[DOM] 이벤트객체

POS기에서 아메리카노와 카페라떼를 주문하려는 장면이라고 생각하자!

 

let menus = document.querySelectorAll("button");    //모든 버튼을 가져온다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; 

function handleClick() {
   // 아래의 빈칸(__)을 채우세요.
   let currentMenu = __; 
   console.log(currentMenu + "를 클릭하셨습니다.");
 }

두버튼의 이벤트 핸들러가 동일한 함수에 의해 동작한다.
어떤 메뉴가 추가되더라도, 하나의 함수를 추가하면된다.
이렇게 함수를 작성하면 함수를 여러번 재 사용할수있다.

 

위의코드에서 현재 메뉴의 이름을 가져오는 방법은?

function handleClick(event) {
console.log(event);      //이벤트객체에 담긴 모든 요소가 출력됨

console.log(event.target);    //버튼을 클릭했을때의 요소가 출력됨   
							  // <button>아메리카노</button> 이렇게 
                              // 메뉴가 button태그에 담겨있음을 알수있다
console.log(event.target.textContent);     //  사용자가 클릭한 메뉴명이 출력됨
}

# 이벤트: 브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건

# 이벤트처리기: 이벤트가 발생하는 것을 감지하는 역할. 이벤트가 발생했을때 이벤트를 받은 다음 처리기안에 있는 코드를 실행한다. 대개 특정 기능을 하는 함수가 실행대상이다. 이벤트핸들러와 이벤트리스너가 있다.

# 핸들러: 하나의 요소에 하나의 이벤트처리가능.  html 태그에 설정하거나, Dom 요소 객체의 이벤트 처리기 프로퍼티 설정하는 방법이다.

# 리스너: 하나의 요소에 복수의 이벤트처리가능. addEventListner메서드

 

# 이벤트객체

이벤트가 발생하면 자동으로 생성되는 객체

사용자가 버튼을 클릭하면, 그 버튼의 textContent를 이용해 메뉴의 이름을 가져올수있다.

사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져온다.

이벤트 객체는 사용자입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트정보를 담은 객체이다.

이벤트객체에 속성은 여러가지다. target, button, screenX, type등.....

target속성: 이벤트를 일으킨 타겟의 요소를 반환

 

*마우스이벤트

onclick: 마우스로 한번 클릭했을때

---

onclick과 addEventListener 차이

<div class ="click">Click</div>
<script>
  let click = document.querySelector(".click");
  click.onclick = function() {
    alert("hello");
   }
 </script>

<div class ="click">Click</div>
<script>
  let click = document.querySelector(".click");
  click.addEventListener("click", function() {
    alert("hello");
   });
 </script>

* 공통점: 클릭이벤트로 사용자가 엘리먼트를 클릭하였을때의 동작하는 이벤트이다.

* addEventListener메서드는

-개발자가 가장 추천하는 모던한 방식이다

-거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메서드이다.

-단점: 익스플로러 8과 그 이전 버전에서는 지원하지 않는다.

---

#이벤트 발생시 작동하는 함수를 할당하는 방법
dom객체에 onclick을 직접 지정하거나
addEventListener라는 메서드를 사용해서 할당한다.