JS event

 

 

• Event

    1. 이벤트 대상
        1) 이벤트가 동작하는 HTML 구성 요소이다.
        2) 이벤트 객체의 target 속성(프로퍼티)로 확인할 수 있다.
        3) 현재 문서 객체를 의미하는 this 키워드로 확인할 수 있다.
      2. 이벤트 타입
        1) 이벤트 종류를 의미한다.
        2) 이벤트 객체의 type 속성(프로퍼티)으로 확인할 수 있다.
        3) 주요 이벤트 타입
          (1) click     : 클릭
          (2) dblclick  : 더블클릭
          (3) mouseover : 마우스 가져다대면 동작
          (4) mouseout  : 마우스 떠나면 동작
          (5) keydown   : 키 내려갈 때
          (6) keypress  : 키 누를때
          (7) keyup     : 키 올라올 때
          (8) focus     : 포커스를 가지면
          (9) blur      : 포커스를 잃으면
          (10) submit   : 서브밋할 때
      3. 이벤트 리스너
        1) 이벤트가 발생하면 동작하는 함수(function)이다.
        2) 일반적으로 익명 함수를 많이 사용한다.
        3) 이벤트 리스너의 매개변수를 선언하면 자동으로 이벤트 객체가 전달된다.
      4. 이벤트 객체
        1) 발생한 이벤트의 상세 정보를 저장하고 있는 객체이다,
        2) 이벤트가 발생하면 자동으로 생성된다.
        3) 이벤트 객체를 사용하려면 이벤트 리스너(함수)에 매개변수를 선언한다.
      5. 이벤트 모델
        1) 이벤트를 작성하는 방법이다.
        2) 종류
          (1) 고전 이벤트 모델
          (2) 표준 이벤트 모델
          (3) 인라인 이벤트 모델

 

▶ 고전 이벤트 모델
      1. 하나의 이벤트 타입은 하나의 이벤트만 가질 수 있다.
      2. 형식
        1) 선언 함수
          function 함수명(){

          }
          문서객체.onclick = 함수명;
        2) 익명 함수
          문서객체.onclick = function(){

          }

 

      1. 이벤트 대상   : document.getElementById('box')
                         event.target
                         this
      2. 이벤트 타입   : click
      3. 이벤트 리스너 : function(event){}
      4. 이벤트 객체   : event

 

 <div id="box1">

    box1

  </div>

  <script>

    document.getElementById('box1').onclick = function(event){

      event.target.style.fontSize = '32px';

      this.style.fontSize = '32px'; // 익명함수는 이벤트처리할땐 사용 X this때문임

    }

  </script>

 

 

▶ 표준 이벤트 모델
      1. 하나의 이벤트가 여러 개의 이벤트 리스너를 가질 수 있다.
      2. 형식
        1) 선언 함수
          function 함수명(){

          }
          문서객체.addEventListener('click', 함수명);
        2) 익명 함수(추천!)
          문서객체.addEventListener('click', function(event){

          });

 

 </script>

  <div id="box2">

    box2

  </div>

  <script>

    document.getElementById('box2').addEventListener('click', function(event){

     this.style.fontSize = '32px';

    })

    document.getElementById('box2').addEventListener('click', function(event){

     this.style.color = 'crimson';

    })

  </script>

 

 

▶ 인라인 이벤트 모델
      1. HTML 구성 요소에 이벤트 속성을 추가하고 실행할 이벤트 리스너를 등록한다.
      2. 형식
        1) 선언 함수
          function 함수명(){

          }
          <div onclick="함수명()"></div>
        2) JavaScript 코드
          <div onclick="alert('메시지')"></div>

 

 

 </script>

  <div id="box3" onclick="myFunc(this)">

    box3

  </div>

  <script>

    function myFunc(dom){

      dom.style.fontSize = '32px';

    }

  </script>

 

 

누르면 커지고 색상이 담김

 

 

▶ 이벤트 방지하기
      1. HTML 구성 요소에 따라서 가지고 있는 기본 이벤트가 있다.
        1) <a> 태그를 클릭하면 href 속성으로 이동한다.
        2) <form> 태그를 서브밋하면 <form> 태그의 모든 입력 요소들을 action 속성으로 가지고 간다.
      2. 이러한 기본 이벤트를 방지할 수 있다.
      3. 이벤트 객체의 preventDefault() 메서드를 호출한다.

 

 </script>

  <ul id="site">

    <li><a href="https://www.google.com/">구글</a></li>

    <li><a href="https://www.naver.com/">네이버</a></li>

    <li><a href="https://www.daum.net/">다음</a></li>

  </ul>

  <script>

    var sites = document.querySelectorAll('#site a');

    sites.forEach(function(element){

      element.addEventListener('click', function(event){

        if(this.href.endswith('.net/')){

          event.preventDefault();

        }

      })

    })

  </script>

 

누르면 그 페이지로 이동

 

 

문제1. 서브밋 방지하기

html

 

 <div id="wrap1">

    <form action="https://search.naver.com/search.naver" id="frm1">

      <div>

      <input type="text" id="query" name="query">

      <button type="submit">네이버검색</button>

      </div>

    </form>

  </div>

  <script>

 

script

 

 <script>

    /* 주의! 서브밋은 <form> 태그가 이벤트 대상이다. <button> 태그가 아니다. */

    document.getElementById('frm1').addEventListener('submit', function(event){

      // 검색어가 비어 있으면 서브밋 방지

      if(document.getElementById('query').value === ''){

        alert('검색어는 필수입니다.');

        event.preventDefault();

      }

    })

  </script>

 

 

문제2. 서브밋 방지하기

html

 

 

 <div id="wrap2">

    <form action="https://search.daum.net/search">

      <div>

        <input type="text" id="q" name="q">

        <input type="button" value="다음검색" id="btn_daum_query" id="frm_daum_query">

      </div>

    </form>

  </div>

 

script

 

 <script>

    document.getElementById('btn_daum_query').addEventListener('click', function(){

      if(document.getElementById('q').value === ''){

        alert('검색어는 필수입니다.');

        return;  // 이벤트 리스너 실행 종료

      }

      document.getElementById('frm_daum_query').submit();  // 서브밋!

    })

  </script>

 

검색하면 네이버에서 검색된 창이나옴

alert 내용

 

문제3. 전체선택/개별선택 체크하기

전체선택누르면 다체크되게 하기 낱개로하나하나 다체크하면 자동으로 전체선택체크되기

html

 

 

 <div id="wrap3">

    <div>

      <input type="checkbox" id="chk_all">

      <label for="chk_all">전체선택</label>

    </div>

    <div>

      <input type="checkbox" id="chk_one" class="chk_each">

      <label for="chk_one">개별선택1</label>

    </div>

    <div>

      <input type="checkbox" id="chk_two" class="chk_each">

      <label for="chk_two">개별선택2</label>

    </div>

    <div>

      <input type="checkbox" id="chk_three" class="chk_each">

      <label for="chk_three">개별선택3</label>

    </div>

  </div>

 

script

 

 script>

    // 전체선택 문서객체

    var chkAll = document.getElementById('chk_all');

    // 모든 개별선택 문서객체

    var chkEach = document.getElementsByClassName('chk_each');

    // 1. 전체선택을 클릭하면 전체선택의 체크상태를 개별선택들도 동일하게 가진다.

    chkAll.addEventListener('click', function(){

      for(let i = 0; i < chkEach.length; i++){

        chkEach[i].checked = chkAll.checked;

      }

    })

    // 2. 개별선택을 클릭하면 모든 개별선택의 체크상태를 확인해서 모두 체크되어 있으면 전체선택을 체크하고 아니면

    for(let i = 0; i < chkEach.length; i++) {

        chkEach[i].addEventListener('click', function(){

          let total = 0;

          for(let j = 0; j < chkEach.length; j++){

            total += chkEach[j].checked;  // 체크되는 경우 total += 1, 해제된 경우 total += 0으로 동작한다.

          }

          chkAll.checked = (total == chkEach.length);

      })

    }

  </script>

 

 

문제4. box를 클릭하면 box 색상을 임의로 변경하기

html

 

 <div id="wrap4">

    box

  </div>

 

script

 

 <script>

    // 난수 발생 함수

    function getRandomInt(start, count){

      return Math.floor(Math.random() * count) + start;

    }

    document.getElementById('wrap4').addEventListener('click', function(){

      this.style.backgroundColor = 'rgb('+ getRandomInt(0, 256) +  ',' + getRandomInt(0, 256) + ',' + getRandomInt(0, 256) + ')';

      })

  </script>

 

누를때마다 random으로 색상이 변함