-
이벤트 등록 & 이벤트 삭제JavaScript/EventHandler 2022. 11. 10. 11:13
이벤트 등록
1. JavaScript에 직접 등록하기
- 자바스크립트 코드를 사용해 DOM엘리먼트 즉, 특정 HTML 태그를 선택해 속성으로
이벤트 발생시 호출될 콜백 메서드를 정의하는 형식
let btn = document.guerySelector('#myBtn'); btn.onclick = function(){ console.log("안녕세상아!") }<body> <div class="click">Click</div> <script> let element = document.querySelector(".click"); element.onclick = function(){ alert("Goodmorning"); } </script> </body>2. HTML태그의 속성에 이벤트 핸들러를 직접기술하는 방식
<input type="button" value="Button" onclick="alert('버튼 클릭됨!!')"></input><body> <div onclick="alert('goodMorning')">클릭해주세욤</div> </body><body> <div onclick="hey();">클릭해주세욤</div> <script> function hey(){ alert('goodMorning'); } </script> </body>3. addEventListener를 사용해 기술하는 방식
let btn = document.querySelector('#myBtn'); function event1(){ console.log("안녕!!"); } function event2(){ console.log("좋은하루!"); } // elem.addEventListener(event, handler) btn.addEventListener('click', event1); btn.addEventListener('click', event2);<body> <script> let element = document.querySelector('.click'); element.addEventListener('click', function(){ alert('goodMorning'); }); </script> </body>이벤트 삭제
이벤트를 삭제할 떄는 반드시 외부에 반드시 함수를 만들고, 그 함수랑 같은 이름을 삭제해야 한다
let btn = document.querySelector('#myBtn'); function event1(){ console.log("안녕!!"); } function event(){ console.log("좋은하루!"); } // elem.addEventListener(event, handler) btn.addEventListener('click', event1); btn.addEventListener('click', event2); // elem.removeEventListenr(event, handler) btn.removeEventListenr('click', event1)아래처럼 하면은 삭제가 되지 않는다
// 아래처럼 하면은 안된다 btn.addEventListener('click', function(){ console.log("event3"); } ) btn.removeEventListenr('click', function(){ console.log("event3"); } )'JavaScript > EventHandler' 카테고리의 다른 글
이벤트 전파 흐름 파악하기 (0) 2022.11.12 이벤트(Events)란?! (0) 2022.11.06