웹브라우저 JavaScript

프로퍼티 리스너

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 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. 저도요 ㅋㅋㅋㅋㅋㅋ target이 속성값인 줄 몰랐네요 ㅋㅋㅋㅋㅋ
    대화보기
    • Danielle
      예제 작성해주실때 태그의 ID 값 같은걸 target 으로 적어주셔서
      event가 나오거나 target 이런게 나오면

      이게 내가 정할수 있는 이름인지, 아니면 예약어 중 하나인건지 헷갈리네요 ㅜㅜ
      차라리 명확하게 loremIpsum 이런걸로 적어주시면 조금 더 이해가 쉬울듯 해요 ㅜㅜㅋㅋ
    • 박병진
      감사합니다.
    • 싸알
      완료
    • 완료
    • 정승옥
      완료
    • 한강
      이벤트 타입 프로퍼티 리스터 방식
      잘 배웠습니다~~^^!
      200709
    • Joo.Love.
      역시나 깔끔한 정리 감사드립니다
    • 준바이
      좋은강의 감사합니다
    • ㅎㅅㅁ
      200212
    • 굼벵이
      완료
    • shino
      와... 책보면서 정말 이해안가던 부분이었는데, 너무 깔끔하게 정리해주셔서 감사드립니다!!
    • JuicyFresh
      감사합니다.
    • 김수
      20180901 봐떵
    • young
      프로퍼티 리스너가 DOM Level 0에서 제공하는 고전 이벤트 모델과 같은 말인가요?
    • 박인호
      12-30
      수강완료.
      프로퍼티 리스너는 자바스크립트로 이벤트 대상을 선택한 후 프로퍼티로 등록하는 방식
      이벤트 핸들러 안에서 이벤트 대상에 접근하려면 event객체(이벤트 핸들러의 인자로 전달되는)를 이용.
      *IE8 이하 버전에서는 event 객체가 이벤트 핸들러의 인자로 전달되지 않기 때문에 window.event 를 이용.
    • Byungsoo Kim
      감사합니다.>>>
    • 아사다마오리족
      event.target.value에서의 target 은 event라는 기능자체의 객체 이고.

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

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