자바스크립트(javascript) 이벤트(Event) 란 무엇이며 사용 방법은

자바스크립트

자바스크립트(javascript) 이벤트(Event) 란 무엇이며 사용방법은?

 

환경: Internet Explorer 11

 

자바스크립트와 HTML 의 상호작용은 이벤트 핸들에 의해서 이루어 지고 있습니다. 이 이벤트를 일으키는 주체는 사용자가 되겠죠. 브라우저에 화면을 클릭하거나 페이지가 로딩될 때, 브라우저 화면이 닫힐 때, 브라우저 화면이 줄거나 늘어날 때도 이벤트가 발생합니다. 이런 이벤트는 어떤 것들이 있고, 어떻게 사용하는지 예제를 통해서 익혀 보도록 하겠습니다.

 

이벤트는 다양한 형태로 발생하게 되는데 개발자들은 이런 이벤트들을 가로채서 원하는 행위를 하게 됩니다. 이벤트는 Document Object Model(DOM) Level 3 와 모든 HTML 요소에서 가지고 있습니다. 그럼 이벤트와 자바스크립트의 관계를 좀더 쉽게 이해하기 위해서 샘플로 알아보겠습니다.

 

onclick 이벤트 타입

 

개발 과정에서 가장 많이 사용하는 마우스 왼쪽 클릭 이벤트입니다. 마우스 왼쪽 클릭 이벤트 요소는 onClick 인데 모든 HTML 태그에 포함되어 있습니다. 아래 예제는 안녕이라는 버튼을 클릭하게 되면 sayHello() 함수를 호출해서 함수 내에 있는 소스를 실행하는 것입니다. 이 외에도 3가지 종류의 버튼 이벤트가 더 있습니다.

 

* ondbclick : 마우스 왼쪽 더블 클릭을 하게 되면 발생하는 이벤트

* onmousedown : 마우스 왼쪽이나 오른쪽 버튼을 눌렀을 때 발생하는 이벤트

* onmouseup : 마우스 왼쪽이나 오른쪽 버튼을 놓았을 때 발생하는 이벤트

 

<html>

<head>

<script type="text/javascript">

<!--

function sayHello() {

   alert("Hello World")

}

//-->

</script>

</head>

<body>

<input type="button" onclick="sayHello()" value="안녕" />

</body>

</html>

 

onsubmit 이벤트 타입

 

onsubmit 는 서버 사이드 프로그램과 연계해서 작업할 때 많이 쓰입니다. 이것은 폼에 있는 개체들의 정보를 다음 페이지로 넘기는 기능을 합니다. 그래서 form 에 있는 객체들의 유효성 체크 함수들이 항상 따라 다니죠. form 에 있는 데이터들이 제대로 들어가 있는지 체크해서 사용자에게 알리기 위함입니다. false 를 리턴하게 되면 다음 페이지로 전송되지 않고 이벤트는 취소됩니다. 아래는 onsubmit validate() 함수를 넣고 리턴값을 받는 예제입니다.

 

<html>

<head>

<script type="text/javascript">

<!--

function validation() {

   all validation goes here

   .........

   return either true or false

}

//-->

</script>

</head>

<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......

<input type="submit" value="Submit" />

</form>

</body>

</html>

 

onmouseover onmouseout 이벤트

 

두 개의 이벤트는 마우스를 텍스트나 이미지 위에 올려 놓았을 때 발생합니다. 함수 이름으로 쓰인 단어의 의미처럼 onmouseover 는 마우스가 개체 위로 올라왔을 때 발생하고 onmouseout 은 마우스가 개체에서 빠져 나갔을 때 발생합니다. 샘플에서는 div 태그 위에 마우스가 올라 가면 over() 함수가 실행되고 떠나게 되면 out() 이 실행됩니다.

 

<html>

<head>

<script type="text/javascript">

<!--

function over() {

   alert("Mouse Over");

}

function out() {

   alert("Mouse Out");

}

//-->

</script>

</head>

<body>

<div onmouseover="over()" onmouseout="out()">

<h2> This is inside the division </h2>

</div>

</body>

</html>

 

샘플을 실행하고 This is inside the division 로 마우스를 가져가면 그림과 같이 mouse over 값이 찍힌 박스가 뜨게 됩니다.

자바스크립트(javascript) 이벤트(Event) 란 무엇이며 사용 방법은

 

표준 HTML 4 의 내용

 

참조용 HTML 태그에 들어가는 이벤트 목록들 입니다. 아래 이벤트만 알고 있으면 웹 페이지에서 사용자가 의도하는 거의 모든 기능을 구현할 수 있습니다.

 

Event

Value

Description

onchange

script

요소가 변경될대 실행

onsubmit

script

양식이 제출될 때 실행

onreset

script

폼이 재설정될 때 실행

onselect

script

값이 선택되었을 때 실행

onblur

script

태그에 포커스를 잃었을 때 실행

onfocus

script

태그에 포커스가 갔을 때 실행

onkeydown

script

키를 눌렀을 때 실행

onkeypress

script

키를 눌렀다가 놓았을 때 실행

onkeyup

script

키를 놓았을 때 실행

onclick

script

마우스를 클릭했을 때 실행

ondblclick

script

마우스를 더블클릭했을 때 실행

onmousedown

script

마우스 버튼을 누르고 있을 때 실행

onmousemove

script

마우스 포인트를 이동했을 때 실행

onmouseout

script

마우스 포인트가 요소의 바깥으로 이동했을 때 실행

onmouseover

script

마우스 포인트가 요소로 들어왔을 때 실행

onmouseup

script

마우스를 놓았을 때 실행


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바