웹브라우저 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. tachyon
    감사합니다!
  2. JustStudy
    2016.07.12 화
    고맙습니다 3.
  3. JustStudy
    2016.07.02 토
    고맙습니다 2.
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. 이주환
    2016. 04. 28
    잘보고 갑니다~!
  6. JustStudy
    고맙습니다
  7. arachi
    역시 두번 이상봐야 되네요ㅎㅎ
  8. 바람개비
    감사합니다
  9. 쥬슈야
    4분22초 "아이이에서는 작동하지 않을거예요" 는 ie 즉, 인터넷 익스플로러에서 작동하지 않는다는 의미군요.
  10. 코딩!
    감사합니다!
  11. 호두과자
    감사합니다!!
  12. 육점이
    감사합니다.
  13. 도로시
    event.target.value라고 하지 않고 this.value라고 해도 크롬에서는 문제없이 실행이 되는데
    ie에서는 이 경우에도 오류가 일어날까요? (ie가 없어서 실행시켜볼 수가 없네요 ;;)

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