JavaScript로 event를 받으면 function(e)와 같이 받았었는데 왜 꼭 e가 들어가는 것인지 의문이었다.
❓function(e)를 사용하는 이유
addEventListener에서 function(e)가 쓰여져있는 위치에는 이벤트 핸들러가 주어져야 한다. 이벤트가 발생했을 때 실행되는 함수가 놓여져야한다는 것이다
그래서 click 이벤트가 발생하면
function(e){
e.preventDefault();
}가 실행된다.
그리고나서 이벤트가 발생하면 이벤트 객체가 생성이 되는데, 그 이벤트 객체가 e라는 파라미터에 할당이 된다.
❓이벤트 객체
1. 이벤트 객체란?
이벤트가 발생하면 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 객체를 만들어 이벤트 리스너에 전달한다.
ex)
mousedown이벤트의 경우 (1)마우스 좌표, (2)버튼 번호,
keydown이벤트의 경우 (1)키 코드 값,shift키가 눌려졌는지 등
이벤트 리스너는 이벤트 객체의 프로퍼티 값ㅇ르 통해 발생한 이벤트에 관한 자세한 사항을 알 수 있다.
2. 이벤트 객체 전달받기
이벤트 리스너가 이벤트 객체를 전달받는 방법에는 3가지가 있다.
1) 이름을 가진 이벤트 리스너 함수의 경우
이벤트 리스너 함수는 다음과 같이 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다.
매개변수의 이름은 e 대신 마음대로 붙여도 된다(생략도 가능)
function f(e){ //매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
...
}
obj.onclick = f; //obj 객체의 onclick리스너로 함수 f 등록2) 익명함수의 경우
익명함수의 경우에도 다음과 같이 첫 번째 매개변수(e)를 통해 이벤트 객체를 전달 받는다.
obj.onclick = function(e){//매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
...
}3) HTML 태그의 리스너의 경우
HTML 태그에 리스너를 만드는 경우엔 이벤트 객체는 event라는 이름으로 전달된다.
//javascript
function f(e){
...
}<!--html-->
<button onclick="f(event)">버튼</button>
<div onclick="alert(event.type)">버튼</div>❓이벤트에 들어있는 정보
- 이벤트 객체에는 발생한 이벤트에 관한 정보를 담고 있는 프로퍼티와 이벤트의 흐름 등을 제어하는 여러 메소드가 들어있다.
이벤트의 디폴트 행동 무효화
- HTML 태그 중 몇몇은 특정 이벤트에 대해 디폴트 행동을 한다. (
<a>태그를 클릭하면 웹 페이지를 로드하는 것,<button type="submit">을 클릭하면 폼 데이터를 웹 서버로 전송하는 것 등) - 위와 같은 디폴트 행동을 취소시킬 수 있는 방법에 두 가지가 있다.
1) 이벤트 리스너에서 false를 리턴
<a href="http://velog.io/" onclick="return false">이동할 수 없는 링크</a>
2) 이벤트 객체의 preventDefault()를 호출
<a href="http://velog.io/" onclick="event.preventDefault()">이동할 수 없는 링크</a>
모든 이벤트의 디폴트를 금지시킬 수 있는 것은 아니나,
이벤트 객체의 cancelable 프로퍼티가 true인 경우에만 취소가 가능하다.
📌예제3
<!--html--> <h3>이벤트의 디폴트 행동 취소</h3> <a href="http://www.naver.com" onclick="return query()">네이버로 이동할 지 물어보는 링크</a> <form action=""> <input type="checkbox">빵(체크 가능)<br> <input type="checkbox" onclick="noAction(event)">술 (체크 불가능) </form>//javascript function query(){ const ret = confirm("네이버로 이동하시겠습니까?"); return ret; } /* confirm();은 확인/취소가 가능하도록 창이 뜨는 함수로, '확인'을 누르면 true, '취소'를 누르면 false가 반환되고 그렇게 a태그의 이벤트 디폴트 행동이 막히게 된다. */ function noAction(e){ e.preventDefault(); }
❓e와 window.Event 둘 다 사용하는 이유
인터넷 익스플로러는 e구문을 이해하지 못해서 window.Event 구문을 함께 작성해주어야한다.
크로스브라우징을 위하여 아래와 같이 작성해주면 된다.
test.onclick = function(e){
e = e||window.Event;
...
...
}참고로 익스플로러는 화살표 함수도 이해하지 못하기 때문에 크로스브라우징을 위해서는 function(e)와 같이 따로 적어주어야 한다.
