JavaScript 2020. 9. 10. 21:29

🎯 자바스크립트 폼 객체, 이벤트 핸들링, 이벤트 버블링을알아본다.

Form 객체

폼은 클라이언트에서 서버에 입력 데이터를 전송하는 역할을 담당한다. 자바스크립트에서는 HTML폼에 form객체가 상호작용할 수 있도록 지원되며 document 객체의 속성으로 설정된다. 접근은 document.forms[] 배열을 통해 접근할 수 있다.

폼 이벤트 핸들러

onSubmit() : 사용자가 데이터를 전송했을 때 발생하는 이벤트 핸들러

onReset() : 리셋 버튼을 클릭했을 때 발생하는 이벤트 핸들러

action과 onSubmit

<body>
    <form action="target.html" id="test" onsubmit="test()">
        <button>전송</button>
    </form>
<script>
    function test(e) {
        console.log("호출됨");
    }
</script>
</body>

버튼이 폼 태그 내에 위치하고 있다. 브라우저에서 전송 버튼을 누르면 폼 태그의 onsubmit 이벤트 핸들러가 자바스크립트의 test() 함수를 호출한다. 폼 태그의 액션은 버튼을 눌렀을 때 취할 행동을 의미한다. 액션 속성으로 인해 test 함수의 콘솔을 볼 새도 없이 바로 타겟페이지로 이동하게 된다.

자바스크립트에선 event 객체에 모든 이벤트를 담는다. 코드를 보면 test 함수 파라미터에 이벤트 객체를 e라는 변수로 받고있다. 변수이름은 자유롭게 지정할 수 있으며 이 이벤트객체 변수는 생략 가능하다.

브라우저 기본 동작 금지하기

event.preventDefault(); 이벤트 객체의 preventDefault() 함수는 submit 이벤트를 무시하는 동작을 한다. 이 코드를 test함수 안에 작성하면 폼의 동작을 막아서 버튼을 클릭해도 액션을 취하지 않는다.

함수로 폼 action 지정하기

<body>
    <form id="test" onsubmit="test()">
        <button>전송</button>
    </form>
<script>
    function test(e) {
        console.log("호출됨");
        var myForm = document.getElementById("test");
        myForm.action="target.html";
    }
</script>

폼 태그에 액션을 직접 안 적어도 onSubmit 속성으로 호출하는 핸들러 함수 안에 액션을 지정할 수 있다.

폼 컨트롤의 종류

모든 폼 컨트롤에 해당하는 객체가 제공된다. 따라서 속성과 메소드를 사용할 수 있다.

이벤트 핸들링

이벤트는 무슨 사건이 일어났다는 신호다. 웹페이지 안에서 발생한 여러가지 사건(이벤트)에 대응해 처리를 담당하는 함수를 이벤트 핸들러라고 한다. 애플리케이션 사용자가 버튼을 클릭하거나 키보드를 입력하는 등의 이벤트 발생시킬 수 있고, 애플리케이션 스스로 페이지를 로드하는 이벤트를 발생시킬 수도 있다.

주요 이벤트 타입

주요 이벤트 핸들러

주요 이벤트 이름에 on을 붙이면 HTML 태그 안에서 이벤트 속성으로 사용할 수 있다. html은 대소문자를 구별하지 않아서 onclick처럼 소문자로 작성해도 된다. 이제 발생한 이벤트를 처리하기 위해 이벤트 속성 안에 핸들러를 할당해야 한다.

html 태그 내 이벤트 속성에 이벤트 핸들러를 할당할 때, 간단한 alert() 함수라면 html에 바로 작성하면 되지만, 코드가 길다면 자바스크립트에 함수를 만들어서 호출하는 것이 좋다.

이벤트 처리 시점

브라우저의 DOM 요소들을 다 로딩한 다음에 이벤트를 실행해야 한다. 따라서 작성한 스크립트에 DOM level 0 모델을 사용하거나 <script> 태그를 </body> 엔딩태그 위에 위치시켜야 한다.

이벤트 모델

이벤트와 이벤트 핸들러를 연결하는 방식인 이벤트 모델은 DOM 레벨에 따라 두 종류로 나뉜다.

DOM Level 0 : 인라인 이벤트 모델, 고전 이벤트 모델

레벨0에서 제공하는 이벤트 핸들러의 이름은 주요 이벤트명 앞에 on접두사를 붙여서 사용된다. (onload, onclick 등)

각 요소에 이벤트 타입별로 하나의 이벤트 핸들러만 연결할 수 있으며 핸들러 내에서 이벤트 발생 객체를 사용하려면 this를 사용해야 한다.

인라인 이벤트 모델

<body onload="init()">
    <button onclick="xxx()" onmouseover="yyy()" onmouseout="zzz()">클릭</button>
    <input type="text" name="userid" onkeyup="kkk(this.value)">
    <button onclick="xyz(event)">이벤트 정보</button>
</body>

<script type="text/javascript">
    //인라인 방식
    function init() {
        console.log("모든 html이 모두 DOM으로 생성된후 실행");
    }
    function xxx() {
        console.log("xxx() 호출");
    }
    function yyy() {
        console.log("onmouseover");
    }
    function zzz() {
        console.log("onmouseout");
    }
    function kkk(v) {
        console.log("키보드가 up", v);

    }
    function xyz(e) {
        console.log(e, e.screenX, e.screenY);
    }
</script>

인라인 이벤트 모델은 HTML 속성을 활용한 방식이다.

고전 이벤트 모델

window.onload를 사용해서 페이지를 다 로딩한 후 함수를 통해 이벤트를 넣어준다.

<body>
  <button id="xxx">클릭</button>
  <input type="text" name="userid" id="userid">
  <button id="xyz">이벤트 정보</button>
</body>

<script type="text/javascript">
    window.onload = init;
    // window.onload = init();은 안됨 

    function init() {

        console.log("모든 html이 모두 DOM으로 생성된후 실행");

        document.getElementById("xxx").onclick = function () {
            console.log("clicked");
        };
        document.getElementById("xxx").onmouseover = function () {
            console.log("onmouseover");
        };
        document.getElementById("xxx").onmouseout = function () {
            console.log("onmouseout");
        };

        document.getElementById("userid").onkeyup = function () {
            console.log(this.value);
        }
        document.getElementById("xyz").onclick = function () {
            console.log(event.screenX, event.screenY);
        };
    }
</script>

DOM Level 0 연습하기

onchange

<script type="text/javascript">    
    function  xxx() {
        var f= document.getElementById("fruits");
        console.log(f.value);
    }
</script>
</head>
<body>
 <select id="fruits" onchange="xxx()">
  <option value="사과">사과</option>
  <option value="바나나">바나나</option>
  <option value="수박">수박</option>
  <option value="포도">포도</option>
 </select>

태그의 아이디를 셀렉해서 어떤 옵션이 선택되었는지 밸류값을 콘솔에 출력한다. onchange는 변화가 생겼을 때 작동하는 이벤트이다. 셀렉트 박스에서 주로 쓰이는 이벤트다.

<body>
    가격<input type="text" name="price" id="price"><br>
  수량
    <select id="quantity" name="quantity" onchange="sum()">
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
 </select>
 <br>
 총가격<input type="text" name="totalPrice" id="totalPrice">

 <script type="text/javascript">
    function sum() {
        var price = document.getElementById("price").value;
        var quantity = document.getElementById("quantity").value;
        document.getElementById("totalPrice").value = parseInt(price)*parseInt(quantity)
    }
</script>

onchange 이벤트로 인해 따로 버튼이 없어도 함수를 호출하는 이벤트를 발생시킬 수 있다. 가격과 수량의 밸류값을 변수에 저장해서 총합을 구하는 이벤트 핸들러를 만든다. 총합계 인풋의 밸류에는 가격과 수량을 곱한 값을 입력한다.

this사용

  <select id="quantity" onchange="sum(this)">

  function sum(s) {
     var quantity = s.value;

핸들러의 this는 핸들러가 할당된 태그를 가리킨다. 여기서 this는 select 태그이다. 셀렉트의 변경사항을 담아서 sum 함수를 호출하고 quantity 변수에 받아온 변경사항의 밸류값을 넣는다.

this.value 사용

<select id="quantity" onchange="sum(this.value)">

    function sum(s) {
        var quantity = s;

value값까지 파라미터로 넘겨받으면 변수 사용이 더 간단해진다.

onkeyup

앞자리 인풋값에 여섯자리가 채워지면 바로 뒷자리로 포커스를 이동시킨다.

<body>
    주민번호<input type="text" id="ssn1" name="ssn1" onkeyup="xxx()">-
    <input type="text" id="ssn2" name="ssn2">
</body>

<script type="text/javascript">
    function xxx() {
        var ssn1 = document.getElementById("ssn1").value;
        if(ssn1.length==6){
            document.getElementById("ssn2").focus();
        }
        document.getElementById("result").innerText=ssn1;
    }
</script>

첫번째 인풋에 onkeyup 이벤트로 함수를 호출한다. 해당 함수는 첫번째 인풋의 밸류값을 가져와서 6자리인지 검사하고 6자리라면 커서의 포커스를 다음 인풋으로 옮긴다.

focus() : 선택된 요소에 포커스를 부여한다. 텍스트 창일 경우 커서를 위치시키고 버튼일 경우 엔터를 사용해 클릭효과를 낼 수 있다.

*getElementsByName

<body>
    좋아하는 &nbsp;&nbsp;&nbsp; 과일 선택하기<br>
    사과<input type="checkbox" name="fruits" value="apple"><br>
    오렌지<input type="checkbox" name="fruits" value="orange"><br>
    바나나<input type="checkbox" name="fruits" value="banana"><br>
    <button onclick="xxx()"> 결과보기</button>
    <div id="result"></div>
</body>

<script type="text/javascript">
    function xxx() {
        var arr = document.getElementsByName("fruits");
        console.log(arr);
        var str = "";
        for (var i = 0; i < arr.length; i++) {
            var c = arr[i];
            if (c.checked) {
                str += c.value + "<br>";
            }
        }
        document.getElementById("result").innerHTML = "<h1>" + str + "</h1>";
    }
</script>

인풋의 name 속성으로 여러 요소를 셀렉할 수 있다. 먼저 fruits라는 name을 가진 요소들을 배열로 얻어온다. for 반복문으로 배열의 모든 요소를 꺼내온 뒤 체크박스가 checked 되어있는지 확인한다. 체크되어있는 것들만 str 변수에 담아서 html에 출력한다. 체크박스는 onclick이벤트를 사용한다.

콘솔에서 arr을 입력해보면 노드리스트를 반환하는 걸 볼 수 있다. 체크된 인풋을 열어보면 checked: true 를 볼 수 있다.

onmouseover

<body>
  <table border="1">
    <tr>
      <td><img src="../image/a.jpg" width="100" height="100"></td>
      <td><img src="../image/b.jpg" width="100" height="100"></td>
      <td><img src="../image/c.jpg" width="100" height="100"></td>
    </tr>
    <tr>
      <td colspan="3"> <img src="../image/a.jpg" width="300" height="300"></td>
    </tr>
  </table>
</body>

<script type="text/javascript">

  window.onload = function () {
    var imgs = document.getElementsByTagName("img");
    console.log(imgs);
    for (var i = 0; i < imgs.length - 1; i++) {
      var img = imgs[i];
      img.onmouseover = function () {
        console.log(imgs[3].src = this.src);
      }
    }
  }
</script>

이미지 테이블에 마우스를 올리면 각각의 이미지를 보여준다. 저장된 이미지 src가 출력된다,

onsubmit

<body>
    <form action="target.html" onsubmit="return formSubmit()">
        아이디<input type="text" name="userid" id="userid">
        <span id="idSpan"></span><br>
        비번<input type="text" name="passwd" id="passwd">
        <span id="pwSpan"></span><br>
        이름<input type="text" name="username" id="username">
        <span id="nameSpan"></span><br>
        이메일<input type="text" name="email" id="email">
        <span id="emailSpan"></span><br>
        <input type="submit" value="로그인">
        <input type="reset" value="취소"><br>
    </form>
</body>

<script type="text/javascript">
		function formSubmit() {
			var result = true;//submit을 할 것인지에 대한 판단 변수 
			var str = "";
			var userid = document.getElementById("userid").value;
			var passwd = document.getElementById("passwd").value;
			var username = document.getElementById("username").value;
			var email = document.getElementById("email").value;
			var idSpan = document.getElementById("idSpan");
			var pwSpan = document.getElementById("pwSpan");
			var nameSpan = document.getElementById("nameSpan");
			var emailSpan = document.getElementById("emailSpan");
			console.log("!")
			if (userid.length == 0) {
				str = "아이디 에러";
				idSpan.innerHTML = str;
				pwSpan.innerHTML = "";
				nameSpan.innerHTML = "";
				emailSpan.innerHTML = "";
				result = false;
			} else if (passwd.length == 0 || Number.isNaN(parseInt(passwd))) {
				str = "비번 에러";
				idSpan.innerHTML = "";
				pwSpan.innerHTML = str;
				nameSpan.innerHTML = "";
				emailSpan.innerHTML = "";
				result = false;
			} else if (username.length >= 4 || username.length == 0) {
				str = "이름 에러";
				idSpan.innerHTML = "";
				pwSpan.innerHTML = "";
				nameSpan.innerHTML = str;
				emailSpan.innerHTML = "";
				result = false;
			} else if (email.length == 0) {
				str = "이메일 에러";
				idSpan.innerHTML = "";
				pwSpan.innerHTML = "";
				nameSpan.innerHTML = "";
				emailSpan.innerHTML = str;
				result = false;
			}
			return result;
		}
	</script>

result = false;는 화면이 넘어가지 않도록 막아주는 역할을 한다. 아이디와 비밀번호가 입력되지 않을 경우 메세지를 출력한다.

스타일 적용하기

<body>
	<input type="button" id="vi" value="보이기" onclick="setView()"><br>
	<input type="button" id="unvi" value="감추기" onclick="unsetView()"><br>
	<input type="button" id="test1" value="테스트" onclick="styleTest()"><br>
	<input type="text" id="test" value="style적용">
	<img id="images" src="../image/a.jpg">
</body>

<script type="text/javascript">
    function setView() {
    	var image = document.querySelector("#images");
    	image.style.display = "inline";
    }

    function unsetView() {
    	var image = document.querySelector("#images");
    	image.style.display = "none";
    }

    function styleTest() {
    	var txt = document.querySelector("#test");
    	txt.style = "color:red; font-size:40px";
    }
</script>

이벤트를 사용해 스타일 속성을 핸들링 할 수 있다.

DOM Level 2 : addEventListener

addEventListener(eventName, handler, useCapture) -> 연결
removeEventListener(eventName, handler) -> 해제

addEventListener를 사용하면 하나의 이벤트에 여러개의 핸들러를 할당할 수 있다. 매개변수에 이벤트 이름과 핸들러, 캡쳐사용여부를 적는다. 핸들러 함수엔 호출 괄호를 붙이지 않고 함수 이름만 작성한다. removeEventListener를 사용하면 이벤트를 해제할 수 있다.

useCapture가 false일 경우엔 이벤트 버블링으로 이벤트 전파하며 true일 경우엔 이벤트캡쳐링으로 이벤트를 전파한다. 기본값은 false이다.

이벤트 전파

이벤트가 처음 발생되면 DOM의 최상위 객체인 document 객체로 이벤트가 전달된다. 자바스크립트에서는 발생된 이벤트를 다음 과정을 거쳐 전파시킨다.

1. 이벤트 캡쳐 (캡쳐링)

document부터 아래로 내려가서 이벤트 발생요소의 부모객체까지 전달되는 것을 의미한다.

2,.이벤트 타겟

이벤트 발생요소까지 전달한다.

3. 이벤트 버블 (버블링): JavaScript의 기본 처리 방식

이벤트 발생요소의 부모에서 위로 document까지 거슬러 올라가는 것을 의미한다.

이벤트 전파 방지

<body>
   <div id="a" style="background-color: #ff0000">
      a
      <div id="b" style="background-color: #00ff00">
         b
      </div>
   </div>
</body>

<script type="text/javascript">
    window.onload = function () {

       var a = document.getElementById("a");
       var b = document.getElementById("b");
       a.addEventListener("click", function () {
          console.log("a");
       }, false);
       b.addEventListener("click", function (e) {
          console.log("B");
          e.stopPropagation();
       }, false);
    };

</script>

b를 클릭하면 버블링 현상이 발생해서 b의 부모인 a까지 출력된다. 캡쳐링을 false로 지정했기 때문에 이벤트 전파방식이 버블링 방식이 된다. 여기서 e.stopPropagation();를 사용하면 전파를 방지할 수 있다.

체크박스 이벤트 연습

<body>
    회원주소
    <input type="text" name="address" id="address" value="서울시~"><br>
    배송지가 같으면 다음을 체크하세요
    <input type="checkbox" name="chk" id="chk"><br>
    배송지 주소
    <input type="text" name="address2" id="address2"><br>
    <span id="test"></span>
</body>

<script type="text/javascript">
    document.getElementById("chk").addEventListener("click", check, false);
    document.getElementById("address2").addEventListener("keyup", function (e) {
        document.querySelector("#test").innerHTML = this.value;
    }, false);

    function check() {
        document.getElementById("address2").value =
            document.getElementById("address").value;
    }
</script>

체크박스에 체크하면 배송지 주소 인풋에 회원주소 인풋 밸류가 똑같이 입력된다.

<body>
    전체선택<input type="checkbox" name="allCheck" id="allCheck"><br>
    <hr>
    사과<input type="checkbox" name="fruits" class="fruits" value="사과"><br>
    수박<input type="checkbox" name="fruits" class="fruits" value="수박"><br>
    바나나<input type="checkbox" name="fruits" class="fruits" value="바나나"><br>
    오렌지<input type="checkbox" name="fruits" class="fruits" value="오렌지"><br>
    <button id="test"> 확인</button>
    <span id="result"> </span>
</body>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("allCheck").
            addEventListener("click", check, false);
        document.querySelector("#test").addEventListener("click", view, false);
    };
    function check() {
        var fruits = document.getElementsByName("fruits");
        for (var i = 0; i < fruits.length; i++) {
            fruits[i].checked = this.checked;
        }
    }
    function view() {
        var fruits = document.querySelectorAll(".fruits");
        console.log("fruits");
        var result = "";
        for (var i = 0; i < fruits.length; i++) {
            var fu = "";
            if (fruits[i].checked) {
                fu = fruits[i];
                result += fu.value + "&nbsp;&nbsp;"
            }
            console.log(result);
            document.querySelector("#result").innerHTML = result;
        }
    }
</script>

선택 후 확인을 클릭하면 선택한 내용을 출력한다.

😜 NEXT : 자바스크립트 이벤트 핸들링 문제 연습하기

'JavaScript' 카테고리의 다른 글

자바스크립트 이벤트 핸들링 연습2 (0)	2020.09.13
자바스크립트 이벤트 핸들링 연습1 (0)	2020.09.11
자바스크립트 DOM 객체 제어 (0)	2020.09.09
자바스크립트 Built-In 내장객체 (0)	2020.09.08
자바스크립트 함수 선언, 콜백, 호출 스케줄링 (0)	2020.09.07

ABOUT ME

미현 개발 TIL 미현 개발 TIL

Form 객체

폼 이벤트 핸들러

action과 onSubmit

브라우저 기본 동작 금지하기

함수로 폼 action 지정하기

폼 컨트롤의 종류

이벤트 핸들링

주요 이벤트 타입

주요 이벤트 핸들러

이벤트 처리 시점

이벤트 모델

DOM Level 0 : 인라인 이벤트 모델, 고전 이벤트 모델

인라인 이벤트 모델

고전 이벤트 모델

DOM Level 0 연습하기

onchange

this사용

this.value 사용

onkeyup

*getElementsByName

onmouseover

onsubmit

스타일 적용하기

DOM Level 2 : addEventListener

이벤트 전파

1. 이벤트 캡쳐 (캡쳐링)

2,.이벤트 타겟

3. 이벤트 버블 (버블링): JavaScript의 기본 처리 방식

이벤트 전파 방지

체크박스 이벤트 연습

'JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Form 객체

폼 이벤트 핸들러

action과 onSubmit

브라우저 기본 동작 금지하기

함수로 폼 action 지정하기

폼 컨트롤의 종류

이벤트 핸들링

주요 이벤트 타입

주요 이벤트 핸들러

이벤트 처리 시점

이벤트 모델

DOM Level 0 : 인라인 이벤트 모델, 고전 이벤트 모델

인라인 이벤트 모델

고전 이벤트 모델

DOM Level 0 연습하기

onchange

this사용

this.value 사용

onkeyup

*getElementsByName

onmouseover

onsubmit

스타일 적용하기

DOM Level 2 : addEventListener

이벤트 전파

1. 이벤트 캡쳐 (캡쳐링)

2,.이벤트 타겟

3. 이벤트 버블 (버블링): JavaScript의 기본 처리 방식

이벤트 전파 방지

체크박스 이벤트 연습

'JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바