웹브라우저 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. 헤밍웨이
    220825 감사합니다~!
  2. 임앤강
    2022-02-14 감사합니다~
  3. 드림보이
    2021.12.31. 이벤트 타입 - 폼 파트 수강완료
  4. pmxsg
    2021.12.23. 수강
  5. labis98
    20210913 좋은 강의 감사합니다.
  6. 박병진
    2020.12.11 완료
  7. 싸알
    완료
  8. anne
    완료
  9. anne
    감사합니다
    대화보기
    • 고석
      무한루프 싫으시면 간단하게 alert를 console.log로 바꾸셔도 됩니다
    • 정승옥
      완료
    • 한강
      오늘도 감사합니다~~^^!
      200713
    • 준바이
      감사합니다.
    • 굼벵이
      완료
    • ahndouzone
      alert를 그냥 console.log('blur'); 이런식으로 콘솔로그로 바꿔서 크롬브라우저 F12에서 확인하시는게 나아요
      안그럼 무한루프에 빠집니다



      <input id="target" type="name" />
      <script>
      var t = document.getElementById('target');

      t.addEventListener('blur', function (event)
      {
      console.log('blur');
      });

      t.addEventListener('focus', function (event)
      {
      console.log('focus');
      });
      </script>
    • 이고잉님후계자
      var t = document.getElementById('target');
      t.addEventListener('submit',function(event){
      if(document.getElementById('name').value.length===0)
      alert('Name필드의 값이 누락되었습니다.');
      event.preventDefault();
      })

      여기에서 사용자가 아무것도 입력하지않고 submit 할때 경고창이 뜨면서 기본동작이 취소가 되잖아요?그럼 여기서 새로고침을 하지않고 경고창을 닫고 다시 name input에 글자를 입력하면 자동으로 기본동작을 할 수 있나요?아니면 기본동작을 취소한것을 다시 가능하게하는 코드를 더 작성해야되나요??
    • avav
    • Lsalute
      엇 정말... 무한루프 빠져 나왔어요...
      대화보기
      • JuicyFresh
        감사합니다.
        무한루프 조심해야 겠네요
      • 유일환
        저는 아래 소스로 강제로 포커스를 해제< e.target.blur() >하여 해결했는데, 다른 방법도 있었군요 감사합니다.
        t.addEventListener('focus', e => {
        alert('focus')
        e.target.blur()
        })

        PS: focusin, focusout도 무한 루프에 빠지네요 ^^;;
        대화보기
        • SlowStarter
          감사합니다!
        • 박인호
          1-3
          수강완료.
          감사합니다.
        • sunday00
          focus무한 얼럿 현상은 다른 곳에서도 똑같은 문제가 발생해서 적어둔 적 있는데요,
          최근 브라우져에서는 얼럿 창을 확인, 닫기 누르는 순간, 브라우져가 원래 사용자가 입력하려던 곳으로 프롬프트를 자동으로 포커스 시켜주는 기능 덕분에 발생하는 문제로 보입니다.

          사용자가 보기에는 확인만 눌렀을 뿐이지만, 컴퓨터는 순식간에 프롬프트를 원위치시켜주고, 자바스크립트는 이걸 또 포커스로 인식하니까 다시 얼럿을 띄우는 것이지요.

          해외 포럼에서는 때문에 크롬유저 대상으로는 포커스와 얼럿을 동시에 쓰지 말것을 권유하고 있고요,

          실무적으로도 경찰청벌금조회사이트 등에서는 실제로 황당하게 벌어지는 이슈이기도 합디다...;;
        • 신입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>
          ======
        • tachyon
          감사합니다
        • jonginout@naver.com
          항상 감사드립니다.
        • JustStudy
          2016.07,13 수
          고맙습니다 3.
        • JustStudy
          2016.07.03 일
          고맙습니다 2.
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
        • 이주환
          2016. 04. 28
          잘보고갑니다~!
        • JustStudy
          고맙습니다
        • 빗살무늬고백
          질문있습니다 form에서 id와 name을 동시에 사용하는 경우도 많던데, 두가지가 차이가 큰가요?
        • 삼군
          focus 대신 focusin으로, blur 대신 focusout으로 하니까 무한 alert 문제가 해결됐습니다.
        • WayneKing
          이벤트 리스너는 어떻게 대기하나요?
          웹브라우저가 html코드를 컴파일?! 아니 뭐라고 해야하지...
          거시기를 하면 리스너라는 자신의 이벤트가 일어나기 기다리고 있나요?

          결국은 리스터는 객체로 메모리 위에 올라가 있는 건가요?
        • 이경호
          result.html 소스코드가 궁금하네요.
        • 쥬슈야
          첫번째 예제에서 result.html 이라는 문서를 만들어 놓고 예제를 따라해야 하는군요. 몰랐네요.
        • Goldcar
          blur, focus예제에서는 alert 대신에 console.log로 진행하시면, 무한 경고창을 피할 수 있을 듯 합니다.
        • 코딩!
          감사합니다!
        • 심재현
          두번째 예제에서 id 값을 target 이 아니고 다른 것을 지정하면 왜 오류가 뜨는지요?
          다른 ID 값을 입력해서 실행하면 "cannot read property 'value' of undefined" 라고 뜨는데..
          ID 값은 특정값을 입력해야만 하는 건가요?
        • 찐똥구리구리
          ㅎㅎ 저도 세번째 예제는 안되네요. 맥 사파리, 파폭, 크롬 다 이상하게 작동되요. 무한 경고창 혹은 아예 안뜹니다. 간단한 코드에 무슨 비밀이 있길래 ㅎㅎㅎ blur focus 개념은 단디 챙겨갑니다. 감사합니다.
        • 상상초월
          크롬에서는 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 자세히 보기