본문으로 바로가기

form event(폼 이벤트 타입) & 문서로딩

category JavaScript연산자ㆍ메서드ㆍ프로퍼티 9년 전

폼 이벤트 타입 및 문서로딩

폼과 관련된 이벤트 타입과 문서로딩에 대해 알아봅니다.




submit

submit은 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생합니다. 

form 태그에 적용됩니다. 

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

html
<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>




change

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

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

html
<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>


html
<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>




load, DOMContentLoaded - 문서로딩

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 합니다. 

이것을 알려주는 이벤트가 load, DOMContentLoaded 입니다.


아래 코드의 실행결과는 null 입니다.

<p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문입니다.

html
<html>
    <head>
        <script>
        var t = document.getElementById('target');
        console.log(t);
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시켜서 순차적으로 실행하는 방법이 있습니다.

html
<p id="target">Hello</p>
<script>
    var t = document.getElementById('target');
    console.log(t);
</script>


또 다른 방법은 load 이벤트를 이용하는 것입니다.

html
<head>
    <script>
        window.addEventListener('load', function(){
            var t = document.getElementById('target');
            console.log(t);
        })
    </script>
</head>
<body>
    <p id="target">Hello</p>
</body>

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행되게 됩니다. 

이는 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있는 여지가 많습니다.


DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없는 장점이 있습니다.

html
<html>
    <head>
        <script>
            window.addEventListener('load', function(){
                console.log('load');
            })
            window.addEventListener('DOMContentLoaded', function(){
                console.log('DOMContentLoaded');
            })
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>



DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.




저작자표시 변경금지

JavaScript연산자ㆍ메서드ㆍ프로퍼티카테고리의 다른글

Array 객체의 메소드  (0) 2016.09.29
프로퍼티(Property)와 가비지 컬렉션(Garbage Collection)  (0) 2016.05.23
String.concat() & Array.concat()  (0) 2016.02.24
charAt() & charCodeAt()  (0) 2016.02.23
String.replace() 및 String.search()  (0) 2016.02.19
댓글
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바