📌 1. 이벤트 작성 방법
- 이벤트는 특정한 상황이 발생했을 때 호출되도록 사용자가 정의하는 함수들이다.
- 특정한 상황, 특정한 동작
➕ this
- 이벤트가 발생한 대상을 필요로 하는 경우
this를 통해서 참조할 수 있다.
📍 1-1. 인라인 방식
-
inline방식은 태그에 직접 자바스크립트를 기술하는 방식이다.
장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.
하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.- 작성 예시
<body> <input type="button" id="target" value="button" onclick="alert('Hello World ' + document.getElementById('target').value)"> <input type="button" id="target2" value="button" onclick="alert('Hello World ' + this.value)"> // this를 통한 참조 </body>- 출력 형태
➕ 이벤트 객체
- 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
📍 1-2. 프로퍼티 리스너
-
프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
- 작성 예시
<body> <input type="button" id="btn" value="btn"> <script> let t = document.getElementById('btn'); t.onclick = function(event){ // 이벤트 객체 alert("Hello world " + event.target.value) }; </script> </body>- 출력 형태
📍 1-3. addEventListener()
- 이벤트를 등록하는 가장 권장되는 방식이다.
- 작성 예시
<body> <input type="button" id="target" value="button"> <script> let t = document.getElementById('target'); t.addEventListener('click', function(event){ // 이벤트 객체 alert("Hello world, " + event.target.value) }); </script> </body>- 출력 형태
