DOM Event

Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?

 

 

- Event Listener :

마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.

이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.

 

 

- addEventListener() :

위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는

이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.

이벤트 리스너 등록 방법을 살펴보도록 하자.

 

1. 자바스크립트 코드에서 프로퍼티로 등록.

window.onload = function () {
  // 문서가 load 될 때 이 함수를 실행

  let text = document.getElementById("text");
  // 아이디가 "text"인 요소를 return

  text.innerText = "HTML 문서 loaded";
};

 

2. HTML 태그에 속성으로 등록.

<button class="btn" onclick="alert('버튼이 클릭되었습니다.')">버튼</button>

 

3. addEventListener 메소드를 사용.

 

element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);

const aElement = document.querySelector("a");
// a 태그로 된 요소를 찾아 변수에 담아준 후, 변수를 클릭했을 때 alert 띄우기.
aElement.addEventListener("click", () => {
  alert("a element clicked!");
});

 

 

- Event 객체 : 

이벤트가 발생할 때 이벤트 객체를 가져올 수 있다.

 

const buttonElement = document.querySelector(".btn2");
buttonElement.addEventListener("click", (e) => {
  // 이벤트 객체 가져오기
  // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
  console.log(e);

  let val;
  val = e.target; // <button class="btn2">버튼</button>
  val = e.target.id; // btn2
  val = e.target.className; // btn2 btn3 btn4
  val = e.target.classList; // ['btn2', 'btn3', 'btn4', value: 'btn2 btn3 btn4']

  val = e.type; // click
  val = e.clientY; // 이벤트가 트리거될 때마다 마우스 좌표를 표시(윈도우로부터의 거리 좌표). 81...
  val = e.offsetY; // 이벤트가 트리거될 때마다 마우스 좌표를 표시(요소로부터의 거리 좌표). 12...
  console.log(val);
});