웹브라우저 JavaScript

폼과 관련된 이벤트 타입을 알아보자.

submit

submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.

form 태그에 적용된다.

아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다.

<form id="target" action="result.html">
    <label for="name">name</label> <input id="name" type="name" />
	<input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event){
	if(document.getElementById('name').value.length === 0){
		alert('Name 필드의 값이 누락 되었습니다');
		event.preventDefault();
	}
});
</script>

아래 구문은 전송을 취소하는 명령이다. 이에 대해서는 기본 동작의 취소에서 자세히 알아본다.

event.preventDefault();

change

change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트다.

input(text,radio,checkbox), textarea, select 태그에 적용된다.

<p id="result"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
    document.getElementById('result').innerHTML=event.target.value;
});
</script>

blur, focus

focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트다. 

다음 태그를 제외한 모든 태그에서 발생한다. <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){
    alert('blur');	
});
t.addEventListener('focus', function(event){
	alert('focus');	
});
</script>

 

댓글

댓글 본문
작성자
비밀번호
  1. Chizcake
    Mac El-Capitan 사용중이며 크롬 버전은 52.0.2785 를 사용중입니다.

    blur와 focus 이벤트를 소스코드대로 실습해보니 경고창이 멈추지 않고 반복해서 뜨는 현상이 있습니다.
    그래서 소스를 alert로 하지 않고 event.target.style.background 로 확인해보았더니 focus와 blur가 정상적으로 작동하는 것을 확인할 수 있었습니다.

    왜 alert로 하면 무한 루프가 도는 현상이 발생하는지는 잘 모르겠지만, blur와 focus 이벤트는 정상적으로 잘 작동하네요^^

    혹시 저처럼 alert로 실습했을 때 무한 루프가 도시는 분들이 있다면 다음 코드를 참고해서 실습해보세요!

    ======
    <script>
    var t = document.getElementById('target');
    t.addEventListener('focus', function(event) {
    event.target.style.background = "powderblue";
    });

    t.addEventListener('blur', function(event) {
    event.target.style.background = "tomato";
    });
    </script>
    ======
  2. tachyon
    감사합니다
  3. jonginout@naver.com
    항상 감사드립니다.
  4. JustStudy
    2016.07,13 수
    고맙습니다 3.
  5. JustStudy
    2016.07.03 일
    고맙습니다 2.
  6. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  7. 이주환
    2016. 04. 28
    잘보고갑니다~!
  8. JustStudy
    고맙습니다
  9. 빗살무늬고백
    질문있습니다 form에서 id와 name을 동시에 사용하는 경우도 많던데, 두가지가 차이가 큰가요?
  10. 삼군
    focus 대신 focusin으로, blur 대신 focusout으로 하니까 무한 alert 문제가 해결됐습니다.
  11. WayneKing
    이벤트 리스너는 어떻게 대기하나요?
    웹브라우저가 html코드를 컴파일?! 아니 뭐라고 해야하지...
    거시기를 하면 리스너라는 자신의 이벤트가 일어나기 기다리고 있나요?

    결국은 리스터는 객체로 메모리 위에 올라가 있는 건가요?
  12. 이경호
    result.html 소스코드가 궁금하네요.
  13. 쥬슈야
    첫번째 예제에서 result.html 이라는 문서를 만들어 놓고 예제를 따라해야 하는군요. 몰랐네요.
  14. Goldcar
    blur, focus예제에서는 alert 대신에 console.log로 진행하시면, 무한 경고창을 피할 수 있을 듯 합니다.
  15. 코딩!
    감사합니다!
  16. 심재현
    두번째 예제에서 id 값을 target 이 아니고 다른 것을 지정하면 왜 오류가 뜨는지요?
    다른 ID 값을 입력해서 실행하면 "cannot read property 'value' of undefined" 라고 뜨는데..
    ID 값은 특정값을 입력해야만 하는 건가요?
  17. 찐똥구리구리
    ㅎㅎ 저도 세번째 예제는 안되네요. 맥 사파리, 파폭, 크롬 다 이상하게 작동되요. 무한 경고창 혹은 아예 안뜹니다. 간단한 코드에 무슨 비밀이 있길래 ㅎㅎㅎ blur focus 개념은 단디 챙겨갑니다. 감사합니다.
  18. 상상초월
    크롬에서는 input 태그를 클릭하면 계속 focus 경고창만 뜨고요,
    파이어 폭스는 input 태그를 클릭하면 blur, focus 순서로 연속해서 경고창이 뜹니다. 바깥쪽 클릭해도 방응이 없습니다.
    사파리 에서는 정상 작동 합니다. 이상하네요 운영체제 버전은 메버릭스( 10.9.4 ) 입니다.

    제가 jsbin 회원가입 해서 소스파일 공유해보려고 했는데 영어도 잘 못하고 가입이 잘 안되네요. 그래서 네이버 링크로 소스파일 대체 할게요. http://me2.do/GRKFP59R

    매번 강의 감사드립니다~
    대화보기
    • egoing
      제가 윈도우라서 테스트를 못해보고 있는데요. 혹시 다른 브라우저나 운영체제에서도 그럼 문제가 발생하고 있나요?
      대화보기
      • 상상초월
        저도 3번째 예제 무한 반복으로 팝업창이 뜨네요. 운영체제 브라우저는 맥, 크롬입니다.
      • egoing
        코드를 jsbin.com에 올려주세요 ~
        대화보기
        • 잉여잉여
          blur, focus 항목에 있는 코드 그대로를 가지고 실행을 해봤는데

          포커스 이벤트가 발생하고, alert('focus');가 수행된 뒤에 확인 버튼을

          누르면 또다시 alert('focus');가 뜨네요.(무한히 반복) 왜 그런걸까요..? 흠...
        • egoing
          예 그렇습니다.
          대화보기
          • 잉여잉여
            텍스트필드에 포커스가 발생하였을 때 딱 한번만 이벤트가 발생하는건가요?
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기