04_이벤트바인팅,이벤트객체, 이벤트전파

제이쿼리 이벤트란 ? 어떤동작이 발생되는것을 의미 

예 ) 팝업띄우기, 마우스 버튼 누르기, 윈도우 사이즈 작아지기 스크롤바 움직이기 등 

이벤트가 발생했을때 작동하는 실행문을 연결하는 것을 이벤트핸들러 라고한다 

 

보통 이벤트 이름에 'on'을 연결해여 사용

만약 click 이벤트가 발생되었다면 onclick 이벤트핸들러가 작동하여 작업을 실행

---

작성법

$(function () {
  $('.선택자')
    .이벤트핸들러('이벤트명', function () {실행문}
    });
});

예제

---

scroll 이벤트 (페이지 바닥감지)

 

스크롤 이벤트는 무엇인가?

우리가 브라우저 창에서 스크롤을 내리면 팝업창이 뜨거나 새로운 정보들이 뜰때가 있다. 

이런 효과를 제이쿼리 window 객체인 scroll 이벤트로 쓰이며

반드시 trigger 메소드와 함께쓴다.

 

이떄 window는 키워드이므로 '' 를 사용하지않는다.

 

trigger 이란? 클릭,스크롤 등 이벤트핸들러를 강제로 실행시켜준다.

(이유는 만약 어떤사용자가 브라우저 창 중간부터 보고있다면 스크롤을 사용안할 수 도 있기때문)

$(function () {
  $(window)
    .on('scroll', function () {
      var st = $(this).scrollTop();
      console.log(st);
    })
    .trigger('scroll');
});

콘솔로 확인해 봤을때 스크롤이 동작하면 좌표가 찍히는것을 볼 수 있다.

 

 

---

resize 이벤트

 

리사이즈 이벤트란? 

브라우저 창 크기 변화에 따라 이벤트가 발생된다.

모바일/데스크탑 환경에 따라 동작이 필요할때.

반응협 웹 구현시에 필요한 기능이다.

$(function () {
  $(window)
    .on('resize', function () {
      // 스크롤바를 뺀 창 가로크기
      // var winW = $(this).innerWidth();
      
      // 스크롤바를 포함한 크기 (주로 사용)
      var winW = $(this).outerWidth();
      
      console.log(winW, 'resize이벤트');
  });
  .trigger('resize');
});

 

스크롤바 까지 포함한 .outerwidth();를 주로쓰며 스크롤과 마찬가지로 trigger로 강제실행시켜준다.

 

---

load 이벤트

 

윈도우 로드와 돔 레디의 차이점
$window.load()	해당페이지의 외부 리소스, 이미지등이 먼저 로드 된 후에 처리
$(document).ready()	window load 보다 먼저 처리되며, dom 객체로만 로드 되자마자 처리

$(function () {
  $(window).on('load', function () {
    console.log('이미지들의 리소스 로딩시 발생');
  });
});

---

mouseenter / mouseleave 마우스 이벤트 실행

 

마우스 이벤트는 가져다 대면 실행/떼면 없어지는 이벤트이다.

$(function () {
  $('#header .gnb>li')
    .on('mouseenter', function () {
      $(this).find('.depth02').slideDown();
    })
    .on('mouseleave', function () {
      $(this).find('.depth02').slideUp();
    });
});

여기서 .stop() 을 추가하면 

이벤트 발생시 앞에 요소랑 겹치면서 버벅이는 증상이 있으므로 stop 사용시 이전효과를 멈춰줄수 있다.

$(function () {
  $('#header .gnb>li')
    .on('mouseenter', function () {
      $(this).find('.depth02').stop().slideDown();
    })
    .on('mouseleave', function () {
      $(this).find('.depth02').stop().slideUp();
    });
});

  // .stop()메서드는 효과메서드 앞에 적으면 이전 효과를 멈춰줌

  // 한번만 선택하고 메서드체인으로 연결

 

 

 

---

click 이벤트

 

  // 버튼을 다섯번 클릭후 이벤트 삭제하기
  var cnt = 0;
  $('#header .btn').on('click', function () {
    cnt++;
    console.log(cnt);

    if (cnt === 5) {
      $('#header .btn').off('click');
    }
  });

---

focus 이벤트

 

 

  // 요소에 포커스 갔을떄 발생 (많이쓸일없음 백엔드에서많이씀)
  $('#header .serch_input').on('focusin', function () {
    console.log('입력필드에 포커스');
  });

  $('#header .serch_input').on('focusout', function () {
    console.log('입력필드에 포커스 사라짐');
  });

 

포커스는 이렇게 로그인 페이지에 들어갔을때 포커스가 자동으로 들어가 있게 한다.

  // 로그인페이지에서 입력필드로 포커스 강제발생
  $('#header .serch_input').focus();

포커스에 밑줄 가는건 변경된것같지만 일단 그냥 쓰자

 

https://api.jquery.com/focus/#focus-handler

.focus() | jQuery API Documentation

 

 

---

이벤트 전파란?

 

이벤트 버블현상

이벤트가 제일 안쪽 요소에서 부터 부모요소로 넘치는것

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링