생활코딩

Coding Everybody

코스 전체목록

닫기

이벤트

이벤트란?

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert(window.location)" value="alert(window.href)" />
    <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>

onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다.

event target

target은 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다.

<input type="button" onclick="alert(window.location)" value="alert(window.href)" />

event type

이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 타입이다. 그 외에도 scroll은 사용자가 스크롤을 움직였다는 이벤트이고, mousemove는 마우스가 움직였을 때 발생하는 이벤트이다.

이벤트의 종류는 이미 약속되어 있다. 아래 링크는 브라우저에서 지원하는 이벤트의 종류를 보여준다.

https://developer.mozilla.org/en-US/docs/Web/Reference/Events

event handler

이벤트가 발생했을 때 동작하는 코드를 의미한다. 위의 예제에서는 alert(window.location)이 여기에 해당한다.

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다.
  2. 임앤강
    2022-02-14 감사합니다.
  3. 드림보이
    2021.12.29. 이벤트 파트 수강완료
  4. pmxsg
    2021.12.23. 수강
  5. labis98
    20210912 좋은 강의 감사합니다.
  6. 박병진
    2020.12.10 완료
  7. 싸알
    완료
  8. anne
    완료
  9. 정승옥
    완료
  10. 한강
    event target, event type, event handler 잘 배웠습니다~~^^!
    200709
  11. Joo.Love.
    명쾌한 설명 정말 최곱니다 ^^
  12. ㅎㅅㅁ
    200212
  13. 굼벵이
    완료
  14. jess
    hahaahhaahahahhaha
  15. jess
    감사합니다.
  16. 미완성
    20190109
  17. JuicyFresh
    감사합니다.
  18. 김수
    20180901 감사합니다 ㅜㅠ..아 ㅓㅣㅠㅝㄹ유ㅣㅠㅠㅠ뮤
  19. SlowStarter
    감사합니다!
  20. 생선과고양이
    20180430 감사합니다
  21. 뽕샤뽕샤
  22. 뽕샤뽕샤
    했을 때~!
  23. 박인호
    12-30
    수강완료.
  24. Byungsoo Kim
    감사합니다. <<<
  25. illliilllliillliii
    감사합니다 !!
  26. crable
    감사합니다.
  27. 망고
    매번 강의 정말 잘보고 있습니다. 고맙습니다.
  28. tachyon
    감사합니다!
  29. JustStudy
    2016.07.12 화
    고맙습니다 3.
  30. JustStudy
    2016.07.02 토
    고맙습니다 2.
  31. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  32. 이주환
    2016. 04. 28
    잘보고 갑니다~!
  33. JustStudy
    고맙습니댜
  34. SK Kim
    value 값에 오타가 있는거 같습니다.
    window.location 아니면 window.location.href 인거 같아요.
  35. WayneKing
    때!!!
  36. 코딩!
    뭔가 변화가 시작되는 시점을 말하는것 같네요
  37. 심드렁
    웹분석 입장에서 이벤트는 정말 중요합니다. 그런데 개념이 잘 안 와닿아서 헤맸었는데 이 수업 한 방으로 해결되는 군요. 감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기