-
이벤트 처리기 등록하기js 2020. 8. 17. 18:57
웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램입니다.
이벤트란 사용자가 버튼을 클릭하는 행위처럼 단말기와 애플리케이션이 처리할 수 있는 동작이나 사건을 뜻합니다.
이벤트 주도형 프로그램이란 이벤트가 발생할 때가지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램을 말합니다.
이벤트 처리기
이벤트가 발생했을 때 실행되는 함수를 말합니다. 함수를 이벤트가 발생했을 때 동작할 이벤트 처리기로 설정하는 행위를 가리켜 '함수를 이벤트의 이벤트 처리기로 등록' 한다고 합니다.
함수를 이벤트 처리기로 등록하는 방법은 세가지입니다.
1.HTML 요소의 속성으로 등록하는 방법
html요소에 이벤트 처리기 속성을 설정하면 그 요소에 이벤트가 발생했을 때 동작하는 이벤트 처리기를 등록할 수 있습니다.
<body> <input type="button" onclick="displayTime();" value="시계버튼" /> </body> <script> function displayTime() { var timer = new Date(); alert(timer); } </script>시계버튼을 클릭하면 displayTime()함수가 실행되며 현재 시각을 경고창으로 알려줌
이 예제에서는 이벤트 처리기가 html요소에 등록되어 있습니다.
onclick="displayTime()"
여기서 onclick부분을 이벤트 처리기 이름이라고 하며 onclick은 마우스로 클릭 했음 을 의미하는 이벤트입니다.
하지만 이 방법에는 단점이 있습니다 바로 js부분과 html부분이 섞인다는 점이죠 따라서 이방법을 해결하기위한
Dom에서 가져온 html 요소에 이벤트 처리기 지정하기 방법과 addEventListener메서드를 사용하는 방식이 존재합니다. addEventListener메서드를 사용하는 방식은 나중에 차차 알아보도록 하겠습니다.
2.Dom에서 가져온 html 요소에 이벤트 처리기 지정하기 방법
먼저 Dom이라는 생소한 용어가 나타났다. 요놈부터 짚고 넘어가자
Dom(Document object model) 자바스크립트 프로그램이 html 요소를 조작할 수 있게 하는 인터페이스 입니다.
dom객체는 다음과 같이 분류를 할 수 있습니다.
window
window 객체라고 불리며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킵니다.
document
document 객체라고 부르며 html 문서 전체를 가리킵니다. html문서에서 html 요소 객체를 가져오거나 html 요소를 새로 만드는 등 html 문서 전반에 걸친 기능을 제공합니다.
요소객체
html문서의 요소를 가리키는 객체
Dom을 사용해서 이벤트 처리기 등록하기
<script> function displayTime(){ var timer = new Date(); alert(timer); } window.onload = function(){ var button = document.getElementById("button"); button.onclick = displayTime; } </script> </head> <body> <input type="button" id="button" value="시계버튼" /> </body>1.window.onload 를 사용해서 html문서를 다 읽어 들인 후에 함수 실행
2.button이라는 id명을 가진 input태그 객체를 가져와서 button변수에 넣어줌
3.button을 클릭했을시 displayTime 함수를 실행
4.displayTime 함수로 이동 현재 날짜와 시각을 경고창으로 출력
Dom을 사용해서 이벤트 처리기 등록하는 이유중 가장 큰 목적은 html코드와 js코드 부분을 분리 하기 위해서 입니다.
코드를 분리하면 프로그램의 가독성과 유지 보수성이 높아집니다.
이를 위해 보통 js부분은 head 태그 요소에 배치합니다
'js' 카테고리의 다른 글
클라이언트 자바스크립트 (0) 2020.08.18 HTML 요소를 동적으로 읽고 쓰기 (0) 2020.08.17 대화상자 표시하기 (0) 2020.08.17 js - 객체 (0) 2020.08.17 js -데이터 타입 (0) 2020.08.17