지난 편에서 이벤트핸들러를 등록하는 법을 슬쩍 봤었다.

이번편에서는 보다 이해하기 쉽게 이 이벤트핸들러를 등록하는 법을 예를 통해 알아보도록 하겠다.



마우스를 클릭 이벤트를 통해 핸들링하는 예제


<input type='button' onClick='window.alert("마우스클릭 이벤트");' value='예제 버튼'>
<font onClick='window.alert("마우스클릭 이벤트");'>예제 글귀</font>


적용 예) - 아래의 버튼과 글귀를 클릭해보세요.
==============




예제 글귀

==============

위에서 input, font가 대상엘리먼트(태그)가 되는 것이다. 즉 해당 버튼이나 글을 클릭할시 onClick 이벤트가 발생하는 것이고
이에 따른 핸들링으로 윈도우 메세지창(window.alert으로 호출)이 뜨는 것이다.

onClick='window.alert()'
클릭 이벤트가 발생하면 window.alert이라는 행위(behavior)가 실행된다.

이것이 이벤트 핸들러 등록의 기본이다.





다른 이벤트들도 알아보자.



셀렉트박스(SelectBox)에서 선택된 아이템의 변경에 따른 핸들링 예제

<font id='target_text'>Target Text </font>
<select onChange='target_text.style.color=this.value'>
    <option value='black'>검정</option>
    <option value='red'>빨강</option>
    <option value='blue'>파랑</option>
</select>


적용 예) - 아래의 셀렉트박스의 값을 변환해보세요.
=================
Target Text  
=================


Target Text의 색상을 변화시키기 위해 Target Text를 감싸고 있는 font 태그에 아이디(id=target_text)를 부여해 식별이 가능하게 하였다.

onChange 이벤트가 발생(선택된 아이템이 변함)할 경우 target_text(즉 위에 id로 지정된 font 태그)의 색상(Style.Color는 폰트색상을 의미) 을 select 태그의 value 값으로 변환시킨다는 의미이다.


-꼐속 작성중-
이 게시물을...