프로그래밍/자바스크립트

생활코딩 javascript 정리 - 이벤트 타입 폼(form)

가카리 2017. 8. 20. 13:19
반응형


36. 이벤트 타입


아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다.
1
<input type="button" onclick="alert(1);" />


웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다.
37. 폼

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

1) 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>


2) 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>

3) 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>



반응형