power-girl0-0

[ 이벤트 타입 ] 폼 (form) 본문

언어/Javascript

[ 이벤트 타입 ] 폼 (form)

power-girl0-0 2021. 2. 10. 20:01
728x90

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

Form과 관련된 이벤트 타입에 대해서 알아보자.

이것은 주로 사용자의 입력값이 유효한지에 대해서 많이 사용된다. 

 submit 

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

 

아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다.

만약 값이 입력되지 않았다면 전송을 중단하는 코드이다.

<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();

위 구문에 대한 설명은 아래 주소를 참고하면 된다.

2021/02/10 - [언어/Javascript] - 기본동작의 취소

 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>

 

 

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

[ 이벤트 타입 ] 마우스  (0) 2021.02.10
[ 이벤트 타입 ] 문서 로딩  (0) 2021.02.10
기본동작의 취소  (0) 2021.02.10
이벤트 전파(버블링과 캡처링)  (0) 2021.02.10
addEventListener( )  (0) 2021.02.10
'언어/Javascript' Related Articles more
Comments