Events(이벤트)

Events

이벤트는 웹상에서 발생하는 사건. 즉, 사용자가 화면의 일부를 "클릭"하거나 "드래그" 등의 행위를 말한다.

• 이벤트 목록

모든 이벤트를 외울순 없다. 상황에 맞게 필요한 이벤트를 찾아서 적용할수 있도록 하자. (검색하는 습관을 들이자!!😎)

이벤트 발생을 감지하는 방법

자바스크립트를 이용해 DOM요소를 기준으로 이벤트를 감지하고 원하는 작업을 할수있다.

<div>
  <button>버튼</button>
</div>

const button = document.querySelector("button");
button.addEventListener("click", function onClick () {
  alert("경고!");
});

addEventListener 메소드는 두가지 인자를 받는다.

1. "click" 문자열(이벤트 목록)
2. onClick 함수(이벤트 발생시 실행할 함수)

addEventListener는 첫번째 인자로 받은 이벤트 발생 직후, 두번째 인자로 받은 함수를 실행한다.

<div>
  <button>버튼 1</button>
  <button>버튼 2</button>
</div>

const button = document.querySelector("button");
button.addEventListener("click", function onClick () {
  alert("클릭!");
});

이렇게 버튼이 2개 이상일때 위 같은 방법으로 사용하면 querySelector가 하나의 element만을 값으로 가지기 때문에 두개의 버튼 이벤트를 등록할 수 없다.

두 버튼에 이벤트를 등록하기

const button1 = document.querySelectorAll("button").[0];
const button2 = document.querySelectorAll("button")[1];
button1.addEventListener("click", function onClick () {
  alert("버튼 1 클릭!");
});
button2.addEventListener("click", function onClick () {
  alert("버튼 2 클릭!");
});

위 코드에서는 같은 코드가 반복되는 모습이 보인다... 좀더 효율적인 방법이 있지 않을까???🙄

버튼을 감싸고 있는 영역(<div>)에 이벤트 등록

const div = document.querySelector("div");
div.addEventListener("click", function onClick () {
  alert("클릭!");
});

이렇게 하면 div의 하위 element를 클릭해도 onButtonClick이 실행된다.
그런데 버튼1과 버튼2를 구분할수가 없게 되었다.....

이벤트 객체를 이용한 방법

• 이벤트 객체는 현재 발생한 이벤트에 대한 상세 정보를 담고 있다.
• event.target 속성은 이벤트가 발생한 요소를 가르킨다.

const div = document.querySelector("div");
div.addEventListener("click", function onlick (evnet) {
  alert(event.target.textContent+"를 클릭하셨습니다.");
});

• 버튼 1을 클릭하면, "버튼 1를 클릭하셨습니다." 라고 출력.
• 버튼 2을 클릭하면, "버튼 2를 클릭하셨습니다." 라고 출력.
  
  그러나 버튼이 아닌 부분을 클릭해도 이벤트가 발생한다.
  이부분을 해결해보자!!!

const div = document.querySelector("div");
div.addEventListener("click", function onlick (evnet) {
  if(event.target.tagName === "BUTTON"){
    alert(event.target.textContent+"를 클릭하셨습니다.");
  }  
});

위와 같은 방법으로 조건문을 통해 제어할수 있다.
프로그래밍에서선 정답이라고 딱 정해진것은 없다고 생각한다. 이렇게 여러가지 방법을 생각해보고 가장 효율적인 방법을 찾는 노력을 하자!!