power-girl0-0

프로퍼티 리스너 본문

언어/Javascript

프로퍼티 리스너

power-girl0-0 2021. 2. 10. 16:08
728x90

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 프로퍼티 리스너 

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.

 

인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만, 뒤에서 배울 addEventListener 방식을 추천한다.

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

위 소스코드와 같이, html과 javascript로 분리한 것을 확인할 수 있다.

여기서, t.onclick 변수 안에 들은 함수를 이벤트 핸들러라고 부른다.

 이벤트 객체 

이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.

이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다. 

<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>

event 변수와 target 변수에서 or연산자를 사용한 이유는 IE 8 이하 버전에서 사용하는 이벤트와 이상의 버전에서 사용하는 이벤트가 다르기 때문에 사용한 것이다.

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

이벤트 전파(버블링과 캡처링)  (0) 2021.02.10
addEventListener( )  (0) 2021.02.10
inline ( 인라인 방식 )  (0) 2021.02.10
이벤트  (0) 2021.02.10
문서의 기하학적 특성  (0) 2021.02.10
'언어/Javascript' Related Articles more
Comments