[javascirpt] 이벤트 등록

아 진짜 이벤트 등록 어쩌라는거야!!!

복잡해서 정리한다.

 

 

현재 회사에서 쓰는 자바스크립트 이벤트 등록은 아래와 같다.

회사에서 사용하는 이벤트 등록 함수

근데 initEvent가 deprecated 되었다. (더 이상 사용되지 않는)

그리고 커스텀 이벤트 등록은 어떻게 하는걸까?

 

https://ko.javascript.info/introduction-browser-events

브라우저 이벤트 소개

이 사이트 강추! 이벤트를 이해하는데 수월했다.

 

1) HTML 속성

HTML 안의 on<event> 속성에 핸들러를 할당할 수 있습니다.
아래 같이 input 태그의 onclick 속성에 click 핸들러를 할당하는 것 같이 말이죠.

<input value="클릭해 주세요." onclick="alert('감사합니다')" type="button">

2) DOM 프로퍼티

DOM 프로퍼티 on<event>을 사용해도 핸들러를 할당할 수 있습니다.
elem.onclick을 사용한 예시:

<input id="elem" type="button" value="클릭해 주세요."> <script>   elem.onclick= function() {      alert('감사합니다.');    }; </script>

3) 1),2)의 문제의 극복 --> addEventListener

HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식엔 근본적인 문제
1), 2) 번의 단점은 이벤트를 하나만 등록 가능하다. 마지막꺼가 덮어버린다
: onclick 프로퍼티는 단 하나밖에 없기 때문에, 복수의 이벤트 핸들러를 할당할 수 없습니다.

// HTML 속성 <input type="button" id="elem" onclick="alert('이전')" value="클릭해 주세요."> <script>    elem.onclick= function() { // 기존에 작성된 핸들러를 덮어씀      alert('이후'); // 이 경고창만 보입니다.    }; </script> //DOM 프로퍼티 input.onclick= function() { alert(1); } input.onclick= function() { alert(2); } // 이전 핸들러를 덮어씀

 

 

addEventListener를 여러 번 호출하면 아래와 같이 핸들러를 여러 개 붙일 수 있습니다.

<input id="elem" type="button" value="클릭해 주세요."/> <script>   function handler1() {     alert('추가 이벤트1!');   };   function handler2() {     alert('추가 이벤트2');   }   elem.onclick= () => alert("안녕하세요.");   elem.addEventListener("click", handler1); // 추가 이벤트 1   elem.addEventListener("click", handler2); // 추가 이벤트 2 </script>

4) 자주 하는 실수

이미 존재하는 함수를 직접 핸들러에 할당하는 예시

sayThanks() 같이 괄호를 덧붙이는 것은 함수를 호출하겠다는 것을 의미

function sayThanks() {   alert('감사합니다!'); } button.onclick= sayThanks; // 올바른 방법 button.onclick= sayThanks(); // 틀린 방법

 

 

sayThanks()를 프로퍼티에 할당하면 함수 호출의 결괏(result)값이 할당

함수 sayThanks가 아무것도 반환하지 않는다면 onclick 프로퍼티엔 undefined이 할당

이벤트가 원하는 대로 동작하지 않습니다.

하지만 HTML 속성값에는 괄호가 있어야 합니다.

<input type="button" id="button" onclick="sayThanks()">

 

5) addEventListener  -> 이벤트 객체 전달

input을 집어 넣고 이벤트 객체 내용 확인하기

elem.onclick = function(e){      console.dir(e);      console.log(e); }

1) onclick 에 함수의 매개변수로 전달하는건 이벤트 객체가 되나봄

2) 이름 다르게 써도됨

 

<input type="button" value="클릭해 주세요." id="elem"> <script> elem.onclick = function(event) { // 이벤트 타입과 요소, 클릭 이벤트가 발생한 좌표를 보여줌      alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");      alert("이벤트가 발생한 곳의 좌표는 " + event.clientX + ":" + event.clientY +"입니다."); }; </script>

이벤트 객체

 

6) addEventListener  -> 객체 전달

<button id="elem">클릭해 주세요.</button> <script> let obj = {      handleEvent(event) {          alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");         }     }; elem.addEventListener('click', obj); </script>

 

 

let event = document.createEvent("Event"); event.initEvent(service, true, true); document.dispatchEvent(event); document.addEventListener("service", function(event) { // (1)     alert("Hello from " + event.target.tagName); // Hello from H1   }); let event = new Event("service"); let event = new Event(service); // 이걸로 document.createEvent("Event");  대체 가능 event.initEvent(service, true, true); // 이거 안해도 됨 document.dispatchEvent(event); document.addEventListener("service", function(event) { // (1)     alert("Hello from " + event.target.tagName); // Hello from H1   });

https://ko.javascript.info/dispatch-events