Languages/Java Script

[Js] 이벤트 | 등록방법 & inline | 프로퍼티 리스너

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이벤트

이벤트란?

이벤트(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 reference | MDN

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about wh

developer.mozilla.org

<input type="text" onchange="alert(this.value)" />

위와 같은 경우 change 즉 텍스트 내용이 바뀐다면 경고를 띄우는 경우 change가 바로 이벤트 타입인 것이다.

event handler

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

이벤트 타입의 들어가는 속성이 바로 핸들러 인 것이다.

inline

인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.

위에서 알아보았던 방식들이 inline 방식이다. 태그안에 이벤트가 속성으로 직접 들어가 있을 때 이것을 inline이라고 하는 것이다.

다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다.

<input type="button" onclick="alert('Hello world');" value="button" />

이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. (this를 자기 자신이라고 생각하면 된다.)

이벤트가 동작하고 있는 input 엘리먼트를 가르키므로 결국 같은 코드가 된다.

<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

this를 이용하면 각 자신의 객체를 가르키기 때문에 여러개를 써도 상관이 없지만 위의 자기 자신을 참조하는 방법의 경우 target을 가르키는 getElementById는 하나의 값만 받아 올 수 있으므로 에러가 난다.

인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 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>

아래 코드는 이벤트 객체안의 들어있는 값을 확인 할 수가 있다. 이벤트가 실행 된 시점에서의 정보들이 담겨있다.

<body>
    <input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(event){
        console.dir(event);
    }
</script>

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

이러한 문제가 크로스 브라우징 이슈 이고, 위와 같이 사용하면 지원이 안되기 때문에 window객체를 사용해야 한다.

아래는 이 문제를 해소하기 위한 코드다.

<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;//여기서도 srcElement가 그 역할을 함.
        alert('Hello world, '+target.value)
    }
</script>

즉 앞에 코드의 없다면 뒤에 있는 이전 버전에서도 지원되는 라이브러리를 사용해야 한다.

'Languages > Java Script' 카테고리의 다른 글

👉🏻[Js] 기본동작의 취소 \| 폼 \| 문서로딩 (0)	2021.02.10
👉🏻[Js] addEventListener() \| 이벤트 전파 \| 버블링과 캡처링 (0)	2021.02.10
👉🏻[Js] 문서의 기하학적 특성 (0)	2021.02.10
[Js] Text객체 \| 값 API \| 조작 API (0)	2021.02.10

Contents

새소식

인기 검색어