생활코딩

Coding Everybody

코스 전체목록

닫기

프로퍼티 리스너

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 뒤에서 배울 addEventListener 방식을 추천한다. 

<input type="button" id="target" value="button" />
<script>
	var t = document.getElementById('target');
	t.onclick = function(){
		alert('Hello world');
	}
</script>

이벤트 객체

이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다. 

<body>
    <input type="button" id="target" value="button" />
<script>
	var t = document.getElementById('target');
	t.onclick = function(event){
		alert('Hello world, '+event.target.value)
	}
</script>

ie8 이하 버전에서는 이벤트 객체를 핸들러의 인자가 아니라 전역객체의 event 프로퍼티로 제공한다. 또한 target 프로퍼티도 지원하지 않는다. 아래는 이 문제를 해소하기 위한 코드다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
	t.onclick = function(event){
		var event = event || window.event;
		var target = event.target || event.srcElement;
		alert('Hello world, '+target.value)
	}
</script>

 

댓글

댓글 본문
작성자
비밀번호
  1. 굼벵이
    완료
  2. 와... 책보면서 정말 이해안가던 부분이었는데, 너무 깔끔하게 정리해주셔서 감사드립니다!!
  3. JuicyFresh
    감사합니다.
  4. 김수
    20180901 봐떵
  5. young
    프로퍼티 리스너가 DOM Level 0에서 제공하는 고전 이벤트 모델과 같은 말인가요?
  6. 박인호
    12-30
    수강완료.
    프로퍼티 리스너는 자바스크립트로 이벤트 대상을 선택한 후 프로퍼티로 등록하는 방식
    이벤트 핸들러 안에서 이벤트 대상에 접근하려면 event객체(이벤트 핸들러의 인자로 전달되는)를 이용.
    *IE8 이하 버전에서는 event 객체가 이벤트 핸들러의 인자로 전달되지 않기 때문에 window.event 를 이용.
  7. Byungsoo Kim
    감사합니다.>>>
  8. 아사다마오리족
    event.target.value에서의 target 은 event라는 기능자체의 객체 이고.

    id="target" 는 그냥 input 객체의 id라는 속성의 값이에요
  9. crable
    감사합니다
  10. Keehwan Jee
    @siggraphk 당연히 다릅니다. 위예제에서 event.target는 는 input 객체입니다.
  11. siggraphk
    +event.target.value에서의 target과 input태그에 있는 id='target'의 target은 다른걸 의미하는 거죠?
  12. tachyon
    감사합니다!
  13. JustStudy
    2016.07.12 화
    고맙습니다 3.
  14. JustStudy
    2016.07.02 토
    고맙습니다 2.
  15. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  16. 이주환
    2016. 04. 28
    잘보고 갑니다~!
  17. JustStudy
    고맙습니다
  18. arachi
    역시 두번 이상봐야 되네요ㅎㅎ
  19. 바람개비
    감사합니다
  20. 쥬슈야
    4분22초 "아이이에서는 작동하지 않을거예요" 는 ie 즉, 인터넷 익스플로러에서 작동하지 않는다는 의미군요.
  21. 코딩!
    감사합니다!
  22. 호두과자
    감사합니다!!
  23. 육점이
    감사합니다.
  24. 도로시
    event.target.value라고 하지 않고 this.value라고 해도 크롬에서는 문제없이 실행이 되는데
    ie에서는 이 경우에도 오류가 일어날까요? (ie가 없어서 실행시켜볼 수가 없네요 ;;)

    그리고 왜 this를 안 쓰고 event를 쓰는 것인지 궁금하네요..
    event라는 객체 자체가 가진 프로퍼티나 메소드들을 활용하려는 것일까요?
    (--> 이 질문은 뒤이어 오는 강의를 들으니 저절로 이해가 되었습니다 ㅎㅎ)
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기