[J] JavaScript & jQuery 공부하기 #21

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

26. 이벤트

  - 이벤트 처리
    * 이벤트(event)
    - 사용자가 문언가를 클릭하거나 혹은 대상 위에 마우스를 가져가거나
      특정 키를 누를 때 상호작용이 발생하는 것 등
      브라우저에서 일어나는 모든 동작을 의미한다
    - 이벤트 핸들러를 통해 이벤트에 대한 특정 작업 처리를 할 수 있다

    * 캡처링(capturing)
    - 이벤트를 이벤트가 발생한 요소의 자식 노드들로 전파함

    * 버블링(bubbling)
    - 캡처링과는 반대로, 이벤트가 일어난 요소에서 이벤트 요소를 포함하고
      있는 부모 요소까지 올라가며 이벤트를 검사한다.

    * 고전 이벤트 모델
    - 문서 객체의 이벤트 속성으로 이벤트를 연결하는 방법
    - 이벤트 하나에 이벤트 리스너 하나만 연결 가능

    < script type="text/javascript">
      window.onload = function () {
        var header = document.getElementById('header');
        header.onclick = function(){
          alert('누르셨군요');
          // null 할당 시 이벤트 제거
          header.onclick = null;
        }
      };
    </ script>
    < body>
      < h1 id="header">눌러보세염</ h1>
    </ body>

   * DOM Level 0 모델의 처리
    * 인라인 이벤트 모델
    - HTML 페이지의 가장 기본적인 이벤트 연결 방법
    - 태그 안에 직접 이벤트 속성 및 이벤트 리스너를 정의함

    < body onload="alert('어서오세요')" onunload="alert('안녕히가세여')">
      < h1>좋은 아침입니다.</ h1>
    </ body>

   * 디폴트 이벤트 제거
   - 이벤트 리스너가 이미 정의되어 있는 이벤트를 디폴트 이벤트라 함
   - false를 리턴하는 이벤트 리스너를 정의하여 제거함

   < script type="text/javascript">
     function whenSubmit(){
      // 유효성 검사
      return false;
     }
   </ script>
   < form onsubmit="return whenSubmit()"></ form>

   * 이벤트 전달 막기
   - 인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 변경
   - 그 외 : stopPropagation() 메소드 사용

   * 예제
   < script type="text/javascript">
     function passwordCheck(){
      var pwd1 = document.getElementById("pwd1");
      var pwd2 = document.getElementById("pwd2");

      if(pwd1.value != pwd2.value){
        alert("비밀번호가 일치하지 않습니다.");
        pwd2.focus();
        pwd1.select();
        return false;
      }
     }
   </ script>
   < body>
     < form name="myForm" onsubmit=" return passwordCheck()" action = "ok.html">
     비밀번호 : < input type="password" name = "passwd1" id="pwd1">

     비밀번호 확인 : < input type="password" name = "passwd2" id="pwd2">

     < input type="submit" value="비밀번호 확인">
     </ form>
   </ body>