JavaScript function 삭제 - JavaScript function sagje

Question

1. 이벤트 추가하기 - addEventListener()
2. 이벤트 제거하기 - removeEventListener()

이벤트 추가하기 - addEventListner()
객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다.
목차 Show

👀 이벤트 핸들러 등록 방법
✔ 객체나 요소에 property로 등록
✔ 객체나 요소의 메소드에 전달하는 방법
👀 이벤트 핸들러 제거 방법
⚙ 이벤트 핸들러 종류

element.addEventListener(type, eventListener);

addEventListener()는 2개의 파라미터를 입력받습니다.

- type : 이벤트 타입

- eventListener : 이벤트가 발생했을 때 실행할 함수

import React from 'react';

const App = () => {

    window.addEventListener('click', async () => {
      const eventBtn = document.getElementById('ebtn');

      eventBtn.onclick = async function(){
        try{
          console.log('addEventListner!!!');
        }
        catch(e){
          console.log(e);
        }
      }
    });
  
    return (
        <div>
          <button id="ebtn">Click</button>
        </div>
    )
}

export default App

eventBtn이 클릭됐을때 이벤트 발생

이벤트 제거하기 - removeEventListner()

element.removeEventListener(type, eventListener);

이 메소드는 아래의 2가지를 파라미터로 입력 받습니다.

- type : 삭제할 이벤트 타입

-eventListener : 삭제할 이벤트 리스터 (addEventListener()의 2번째 파라미터로 전달된 함수)

removeEventListener() 메소드를 사용해서 이벤트를 삭제하기 위해서는

addEventListener() 메소드를 사용하여 이벤트를 등록할 때,

2번째 파라미터로 전달하는 eventListener를 익명함수로 전달하면 안됩니다.

removeEventListener() 메소드를 호출할 때 2번째 파라미터로 넣어주어야 하기 때문입니다.

<추가 내용 작성중>

👀 이벤트 핸들러 등록 방법

✔ 객체나 요소에 property로 등록

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript EventListener</title>
  </head>

  <body>
    <h2>객체나 요소에 property로 등록</h2>
    <button class="fruits">apple</button>

    <script>
      // 아이디가 "fruits"인 요소를 선택
      let result = document.querySelector(".fruits");

      result.onclick = function () { //요소의 property로 등록
        // 버튼 클릭 시 실행.
        console.log(result.textContent + "를 클릭하셨습니다.");
      };
    </script>
  </body>
</html>
}

이벤트 타입별로 오직 하나의 이벤트 핸들러(aka.이벤트 리스너)만 등록할 수 있다는 단점이 있다.

그러나, 아래의 방법으로 이벤트 핸들러를 등록하면, 하나의 객체에 여러 개의 이벤트 핸들러를 등록할 수 있다.

✔ 객체나 요소의 메소드에 전달하는 방법

원형: 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript EventListener</title>
  </head>

  <body>
    <h2>객체나 요소의 메소드에 전달하는 방법</h2>
    <h2>하나의 객체에 이벤트를 여러개 등록할 수 있다.<h2>
    <p>아래 버튼에 마우스를 올리거나 클릭해 보세요!</p>
    <button id="btn">버튼</button>
    <p id="text"></p>

    <script>
      var btn = document.querySelector("#btn"); // 아이디가 "btn"인 요소를 선택함.
      btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 등록
      btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 등록
      btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 등록

      function clickBtn() {
        document.querySelector("#text").innerHTML = "버튼이 클릭됐어요!";
      }
      function mouseoverBtn() {
        document.querySelector("#text").innerHTML =
          "버튼 위에 마우스가 있네요!";
      }
      function mouseoutBtn() {
        document.querySelector("#text").innerHTML =
          "버튼 밖으로 마우스가 나갔어요!";
      }
    </script>
  </body>
</html>

하나의 객체에 여러 개의 이벤트 핸들러를 등록할 수 있다.

첫 번째 방법은 HTML요소에 이벤트 핸들러를 등록하는 방법이며 두 번째 방법은 HTML요소를 이용하지 않고 자바 스크립트 내부에서 등록하는 방법이다. 따라서, 관심사 분리를 위해 후자를 사용하는 것이 권장된다.

관심사 분리?
HTML, CSS, JavaScript가 각각의 로직에 집중할 수 있게 분리하여 코드를 작성하는 것이다.

이벤트 리스너를 프로퍼티로 등록할 때는 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 합니다.
TCPshool: 이벤트 리스너 등록

👀 이벤트 핸들러 제거 방법

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript EventListener</title>
  </head>

  <body>
    <h2>이벤트 리스너 삭제</h2>
    <p>아래 버튼에 마우스를 올리거나 클릭해 보세요!</p>
    <button id="btn">삭제 버튼</button>
    <p id="text"></p>

    <script>
      var btn = document.querySelector("#btn"); // 아이디가 "btn"인 요소를 선택함.
      btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 리스너를 등록함.
      btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함.
      btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 리스너를 등록함.

      function clickBtn() {
        // 버튼을 누를 시 삭제
        btn.removeEventListener("mouseover", mouseoverBtn); //mouover 삭제
        btn.removeEventListener("mouseout", mouseoutBtn); //mouseout 삭제
        document.querySelector("#text").innerHTML =
          "이벤트 리스너가 삭제되었어요!";
      }
      function mouseoverBtn() {
        document.querySelector("#text").innerHTML =
          "버튼 위에 마우스가 있네요!";
      }
      function mouseoutBtn() {
        document.querySelector("#text").innerHTML =
          "버튼 밖으로 마우스가 나갔어요!";
      }
    </script>
  </body>
</html>

⚙ 이벤트 핸들러 종류

너무 많아서 정리하기 힘들다.. 필요할 때 찾아서 쓰는 게 좋을 것 같다

https://developer.mozilla.org/ko/docs/Web/Events

http://www.ktword.co.kr/test/view/view.php?m_temp1=2744

Quiz

아래 예제의 button을 클릭했을 때 "코드스테이츠에 오신 것을 환영합니다"라는 안내창을 띄우기 위한 적절한 코드는?

function displayAlert() {
  alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert

document.querySelector('#apply').addEventListener('click', function(){
   alert("코드스테이츠에 오신 것을 환영합니다")
})

Reference:

코드 스테이츠,

http://www.tcpschool.com/javascript/js_event_eventListenerRegister

jQuery 함수 제거 JavaScript removeEventListener removeEventListener 안됨 자바스크립트 클릭 삭제 Javascript 이벤트 초기화 자바스크립트 객체 삭제

JavaScript function 삭제 - JavaScript function sagje

👀 이벤트 핸들러 등록 방법

✔ 객체나 요소에 property로 등록

✔ 객체나 요소의 메소드에 전달하는 방법

👀 이벤트 핸들러 제거 방법

⚙ 이벤트 핸들러 종류

Quiz

관련 게시물

블랙헤드 나무위키 - beullaeghedeu namuwiki

자켓 목때 제거 - jakes mogttae jegeo

타일 찌든때 제거 - tail jjideunttae jegeo

Xplatform 날짜 계산 - Xplatform naljja gyesan

냉동 해산물 비린내 제거 - naengdong haesanmul bilinnae jegeo

MR 변환 사이트 - MR byeonhwan saiteu

대학병원 점 빼기 - daehagbyeong-won jeom ppaegi

매트랩 커브 피팅 함수 - maeteulaeb keobeu piting hamsu

엑셀 반복 함수 - egsel banbog hamsu

JQuery form post 전송 - jQuery form post jeonsong

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi

아기는 몇살까지? - agineun myeochsalkkaji?

섬머 포켓 스위치 - seommeo pokes seuwichi

사진 수염 제거 어플 - sajin suyeom jegeo eopeul

복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?

마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi

롤20 브금 매크로 - lol20 beugeum maekeulo

아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun

Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae

온 세상 창조주 ppt - on sesang changjoju ppt

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의