티스토리 뷰
브라우저에서 발생하는 이벤트(마우스 클릭, 키보드 입력, 스크롤, 네트워크 연결, 리소스 로드 등)에 따라 어떤 일을 하라고 등록해 줄 수 있다. 이 때 이용하는 것이 Event Listener
어떻게? addEventListener를 이용
target.addEventListener(type, listener[, options]);
- type: 이벤트 유형 (참고: https://developer.mozilla.org/ko/docs/Web/Events)
- listener: Event 인터페이스 또는 Javascript function을 구현하는 객체(콜백 함수) (이벤트를 설명하는 단일 매개 변수 허용)
예제)
html
<html>
<header></header>
<body>
<div class="outside">outside</div>
</body>
<script src="test.js"></script>
</html>javascript
var el = document.querySelector(".outside");
el.addEventListener("click",function(e) {
console.log("clicked!",e);
console.log(e.target.className, e.target.nodeName);
console.log(e.target.innerText);
})
참고:
EventTarget.addEventListener()
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스텀 필드 또는 함수를 가질수도 있습니다. 이벤트는 렌더링 모델에서 기본적인 사용자 인터렉션부터 발생한 것에대한 자동 알림까지 모든 것을 나타낼 수 있습니다.
developer.mozilla.org
'서비스 개발 > 웹' 카테고리의 다른 글
| [네이버 부스트코스 웹 프로그래밍] JSP, JSP Lifecylce (0) | 2020.02.25 |
|---|---|
| [네이버 부스트코스 웹 프로그래밍] Ajax, CORS, Visual Studio Code Live Server Extension (0) | 2020.02.24 |
| [네이버 부스트코스 웹 프로그래밍] DOM과 querySelector (0) | 2020.02.23 |
| [네이버 부스트코스 웹 프로그래밍] JavaScript setTimeout과 비동기 (0) | 2020.02.23 |
| [네이버 부스트코스 웹 프로그래밍] JavaScript Call Stack, VScode에서 디버그 설정 (0) | 2020.02.23 |