이벤트 객체

• 이 두 개의 버튼을 클릭할 때, 각각 아메리카노를 클릭하셨습니다. 또는 카페라떼를 클릭하셨습니다.라고 출력하는 단순한 프로그램을 구현해보자.

  • 

• HTML

  • <button>아메리카노</button>
     <button>카페라떼</button>

• js

  •  let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
    
      let btnAmericano = menus[0];  // 가져온 버튼에 index 1번째는 아메리카노 버튼
      let btnCaffelatte = menus[1];  // 2번째는 카페라떼 버튼
    
      function handleClick() {
        // 아래의 빈 칸(____)을 채우세요.
        
        let currentMenu = ____; // TODO
        console.log(currentMenu + "를 클릭하셨습니다.");  // 클릭한 메뉴 + 안내멘트를 출력
      }
    
      btnAmericano.onclick = handleClick;   
      btnCaffelatte.onclick = handleClick;  

---

Event.target

• Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킨다.

• event.target 속성을 사용하여 이벤트 위임을 구현할 수 있다.

  •  let menus = document.querySelectorAll("button");
    
      let btnAmericano = menus[0];  
      let btnCaffelatte = menus[1];  
    
      function handleClick(e) { // e.target은 사용자가 클릭한 <button> 요소를 가리킴
        console.log(e.target); 
      }
      
      btnAmericano.onclick = handleClick;   //  handleClick에 .onclick 기능 추가
      btnCaffelatte.onclick = handleClick;  // 각각의 <button>을 클릭할 때마다 그 값을 보여줌.

---

Event.target으로 볼 수 있는 값

- 예제 -

   <button id="index1" class="americano"> 아메리카노 </button>

textContent

• 텍스트 콘텐츠를 출력

console.log(event.target.textContent); // 아메리카노

id

• id값을 표현

console.log(event.target.id); // index1

tagName

console.log(event.target.tagName); // button

className

console.log(event.target.className); // americano

• js

  •  let menus = document.querySelectorAll("button"); 
    
      let btnAmericano = menus[0];  
      let btnCaffelatte = menus[1];  
    
      function handleClick(e) {
        
        let currentMenu = e.target.textContent;  // 버튼에 텍스트를 출력해야하므로 .textContent 할당
        console.log(currentMenu + "를 클릭하셨습니다.");  
      }
    
      btnAmericano.onclick = handleClick;   
      btnCaffelatte.onclick = handleClick;