본문 바로가기
개발/JS

이벤트와 이벤트 핸들러

by 두리두리안 2021. 3. 16.

이벤트란

웹페이지에서 사용자의 조작으로 일어날 수 있는 모든 사건 

이벤트 핸들러란

이벤트 이름 앞에 on이라는 예약어를 붙인다.

밑의 자료가 기본적인 이벤트이다. 

예제코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script language="javascript">
  function get_focus(x){
	alert(x.name +"의 위치에서 커서가 있다");
}
  function lose_focus(x){
	alert(x.name +"의 위치에서 커서가 사라졌습니다.");

  }
</script>
</head>
<body>
   <form name="my_form">
   	이름: <input type="text" name="name" onFocus="get_focus(this)" onBlur="lose_focus(this)"/><br/>
   	주소: <input type="text" name="addr" onFocus="get_focus(this)" onBlur="lose_focus(this)"/><br/>
   </form>
</body>
</html>

165

예제코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script language="javascript">
  function check_form(){
     alert("서버로 전송")
     return true;
  }
  function clear_form(){
     alert("폼 필드들을 초기화")
  }
</script>
</head>
<body>
   <form name="my_form" action="http://www.freelec.co.kr" onsubmit="return check_form()" onReset="clear_form()">
      ID: <input type="text" name="id"/>
      <input type="submit" value="전송"/>
      <input type="reset" value="필드 초기화"/>
   
   </form>
</body>
</html>

'개발 > JS' 카테고리의 다른 글

const and let  (0) 2022.02.27
Variables  (0) 2022.02.27
Basic Data Type  (0) 2022.02.27
[Javascript] 반복문  (0) 2021.04.10
사용자 정의 객체  (0) 2021.03.16