javasrcipt 이벤트

김정훈·2024년 4월 3일
JavaScript

JavaScript

목록 보기
13/19

1. 이벤트 처리기 등록

  • document 객체에 "on이벤트명" 속성에 이벤트 핸들러 함수를 직접 대입 
 const btn = document.getElementById("button");
 btn.onclick = changeColor;

2. 이벤트 처리기의 문제점

특정 요소의 특정 이벤트에 대해서 이벤트 처리기를 단 하나만 등록할 수 있습니다. 그 요소에 똑같은 이벤트를 처리하는 이벤트 처리기를 등록하면 나중에 등록한 함수가 이전에 등록한 함수를 덮어씁니다.
-> 해결방안 : 이벤트 리스너를 등록하면 여러개 사용가능!

3. 이벤트 리스너를 등록하고 삭제하는 방법

이벤트 리스너 등록
target.addEventListener(type, listener, useCapture);

  • target : 이벤트 리스너를 등록할 DOM 노드
  • type : 이벤트 유형을 뜻하는 문자열("click", "mouseup" 등)
  • listener : 이벤트가 발생했을 때 처리를 담당하는 콜백 함수의 참조
  • useCapture : 이벤트 단계

이벤트 리스너 삭제
target.removeEventListener(type, listener, useCapture);

 window.addEventListener("DOMContentLoaded",function(){
            const buttonEl = document.getElementById("button");
            buttonEl.addEventListener("click",handleClick); //이벤트 리스너 등록
            buttonEl.removeEventListener("click", handleClick); //이벤트 리스너 제거
            function handleClick(){
                alert("클릭됨");
            }
        });

참고) 동기, 비동기

이벤트 → 비동기 방식
동기 → 순서대로 실행

setTimeout : 지연실행함수(비동기를 만들 함수)
clearTimeout : 지연실행함수 취소
setInterval : 지연반복실행함수 ->반환값(이벤트 핸들러 등록 ID)
clearInterval : 지연반복실행함수 취소

setTimeout(funciont(){
	//지연실행할코드
}, 지연시간(1/1000초)
function work(title){
  setTimeout(function(){
    console.log(title);
  }, time);
}
work("A작업", 5000);
work("B작업", 1000),
work("C작업", 3000), //>B작업 C작업 A작업

4. 이벤트리스너의 장점

  • 같은 요소의 같은 이벤트에 이벤트 리스너를 여러 개 등록할 수 있다.
  • 버블링 단계는 물론 캡처링 단계에서도 활용할 수 있다. 반면에 DOM 요소 객체에 직접 등록한 이벤트 처리기는 버블링 단계의 이벤트만 캡쳐할 수 있다.
  • removeEventListener, stopPropagation, preventDefault를 활용하여 이벤트 전파를 정밀하게 제어할 수 있다.
  • HTML 요소를 포함한 모든 DOM 노드에 이벤트 리스너를 등록할 수 있다.

5. 이벤트 전파

자식 요소가 부모 요소 안에 겹쳐진 상태로 표시되면, 자식 요소를 클릭하면 컴퓨터는 자식 요소를 클릭했는지 부모 요소를 클릭했는지 알아낼 방법이 없습니다. 그래서 요소에서 이벤트가 발생하면 DOM 트리의 관련 요소(즉, 그 요소의 조상 요소) 전체에 그 이벤트에 반응하는 이벤트 처리기나 이벤트 리스너가 등록되어 있는지를 확인하는 작업을 거칩니다. 그리고 등록된 함수가 있을 때는 그 함수를 실행하도록 만들어져 있습니다.
구체적으로는 요소에서 이벤트가 발생하면 그 다음 단계에 접어들었을 때 그 이벤트를 다음 요소로 전파합니다. 그 단계에 해당 이벤트에 반응하는 이벤트 처리기나 이벤트 리스너를 발견하면 그들을 실행합니다.

1) 캡쳐링 단계

Window 객체 -> DOM 트리 -> 이벤트 타깃
이단계 반응하도록 등록된 이벤트 리스너는 이벤트가 발생한 요소에 등록된 이벤트 처리기나 이벤트 리스너보다 먼저 실행.

2) 타깃 단계

이벤트가 이벤트 타깃에 전파되는 단계
이벤트 타깃에 등록된 이벤트 처리기나 이벤트 리스너는 이 시점에 실행

3) 버블링 단계

이벤트 타깃 -> DOM 트리 -> Window 객체
이 단계에 반응하도록 등록된 이벤트 리스너는 이벤트가 발생한 요소에 등록된 이벤트 처리기나 이벤트 리스너 다음에 실행.
같은 요소의 같은 이벤트, 같은 단계에 반응하게끔 등록된 이벤트 처리기와 이벤트 리스너가 있다면 이벤트 처리기가 먼저 실행되며 이벤트 리스너가 등록된 순서에 따라 차례대로 실행.

box1.addEventListener("click", function(){
  console.log("Box1");
});
box2.addEventListener("click", function(){
  console.log("Box2");
});
box3.addEventListener("click", function(){
  console.log("Box3");
}); //> box3 box2 box1

위코드는 전파에 위해 Box3를 눌렀음에도 불구하고
box3,box2,box1 모두 출력한다.

4) 이벤트전파 관련 메서드

  • addEventListener("이벤트 명", 이벤트 핸들러 함수, 캡쳐링 여부)
    캡쳐링 여부
    false (기본값) : 버블링 단계에서 이벤트 전파
    true : 캡쳐링 단계에서 이벤트 전파

  • stopPropagation() : 이벤트 전파 취소

  • stoplmmediatePropagation() : 이벤트 전파 일시정지

  • preventDefault() : 기본동작 취소

window.addEventListener("DOMconentLoaded", function(){
  const linkEl = document.getElementById("link");
  linkEl.addEventListener("clcick", function(e){
    e.prventDefault(); //기본동작취소
  }); //a태그의 페이지이동 기본동작을 취소시켜서 반응하지않음.

모든 이벤트핸들러 안에는 첫번째 매개변수에 이벤트객체가 들어있다. 이벤트객체에는 이벤트의정보가 담겨있다.

box.addEventListener("click", funciton(e){ 
	console.log(e);//이벤트객체 출력

6. 이벤트 리스너 안의 this

이벤트 리스너 안의 this 값은 '함수를 호출 할때 그 함수가 속해 있던 객체의 참조' 입니다. (이벤트가 바인딩된 요소)

1) 이벤트 리스너 안의 this는 이벤트가 발생한 요소 객체

window.addEventListener("DOMContentLoaded",function(){
  const linkEl = document.getElementById("link");
  linkEl.addEventListener("click",function(e){
    e.preventDefault();//기본동작취소
    console.log("클릭!");
    console.log('this',this); 
    //>his <a href="https://www.naver.com" id="link">네이버</a>
  });
});

2) this가 원하는 객체를 가리키도록 설정하는 방법

  • bind 메서드를 사용하는 방법
const person = {
  name : "이름"
};
window.addEventListener("DOMContentLoaded", function(){
  function handleClick(){
    console.log(this);
  }
  handleClick = handleClick.bind(person);//bind함수
  const buttonE1 = document.getElemnetById("button");
  buttonEl.addEventListener("click",handleClick);
});
  • 익명 함수 안에서 실행하는 방법
const person = {
  name : "이름"
  showInfo(){
    console.log(this);
  }
};
window.addEventListener("DOMContentLoaded", function(){
  function handleClick(){
    console.log(this);
  }
  handleClick = handleClick.bind(person);//bind함수
  const buttonE1 = document.getElemnetById("button");
  buttonEl.addEventListener("click",function(){person.showInfo);
});
  • handleEvent

3) 이벤트객체 내부 메서드

const divEl = document.getElementById("div");
divEl.addEventListener("click",function(e){
  console.log("e.target", e.target);
  //<span>클릭!</span>
  console.log("e.currentTarget", e.currentTarget);
  //<div id="div">...</div>
  console.log("this",this);
  //<div id="div">...</div>

.target : 실제 클릭한 요소
.currentTarget : 이벤트가 바인딩된 요소(this와 동일하다)

<span>클릭!</span> //target
<div id="div"><span>클릭!</span></div> //currentTarget,this

4) 화살표함수와 this

화살표함수는 일반함수와 다르게 정의될때 this 값이 변경된다. 그렇기 떄문에 this값은 window이다.

const divEl = document.getElementById("div");
divEl.addEventListener("click",(e)=>{ //화살표함수
  console.log("this",this);
  //> window

이벤트 객체
1. 이벤트 객체의 공통 프로퍼티
2. 마우스 이벤트 객체

  • 마우스 이벤트 객체에서 좌표를 담당하는 프로퍼티
    mouseenter, mouseleave
    mouseover, mouseout
  1. 키보드 이벤트 객체
    keyup : 눌렀다 뗄때 이벤트 발생
    keypress : 누르면 계속 이벤트 발생
    keydown : 누르면 한번만 이벤트 발생

change : 키를 조작할때
:select, input[type='file']파일을 선택, input[type='number|lange']

이벤트 처리
1. 이벤트 처리기를 등록하는 방법

이벤트 핸들링
1. 리액트의 이벤트 시스템

  • 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷

  1. 이벤트를 사용할 때 주의사항
    1) 이벤트 이름은 카멜표기법으로 작성
    2) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
    3) DOM 요소에만 이벤트를 설정할 수 있음

  2. 이벤트 핸들링 익히기

  • onChange 이벤트 핸들링하기
    1) state에 input 값 담기
    2) 버튼을 누를 때 comment 값을 공백으로 설정
    3) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다.
    4) 화살표 함수 형태로 메서드를 정의
    5) input 여러 개 다루기
    - event 객체를 활용하는 것, e.target.name 값을 사용
profile
김정훈
안녕하세요!
이전 포스트

javascript 웹 브라우저 객체

다음 포스트

Javascript 함수

0개의 댓글