Javascript 5일차 - 이벤트, jquery

>이벤트(Event) 
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행
- 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 함 

>이벤트 타입(=이벤트명)
- 발생한 이벤트의 종류 
- 가장 많이 사용하는 키보드,마우스,HTML DOM,window객체 등을 처리하는 이벤트가 많이 제공

   (onclick,onkeyup, onload, ...)

>이벤트 타겟
- 이벤트가 일어날 객체 

>이벤트 리스너(=이벤트 핸들러)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수

- 이벤트를 추가할때 add.EventListener(이벤트명,이벤트리스너)를 사용하면 된다.
- 지정된 타입의 이벤트가 특정 요소에 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행 
  <input type="button" onclick="sendit()" id="btn">  <--이벤트 타겟
                               ------  -----------
                           이벤트명  이벤트리스너

  ex)  const btn = document.getElementById("btn"); 
        btn.addEventListener("click",sendit);

      ** 버튼(타겟)을 클릭(타입)했을때 이거(리스너)해~

>이벤트 객체
- 특정 타입의 이벤트와 관련이 있는 객체
- 발생한 이벤트에 대한 상세 정보를 저장 
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type
- 이벤트의 대상을 나타내는 target 프로퍼티를 가짐 
- 이벤트 객체는 이벤트 리스너가 호출될 때 매개변수로 전달 

    ex)버튼에 클릭 이벤트가 발생했을 떄

    const sendit = function(e){
        // e.target:클릭된 버튼 
        // e.type  :'click'
    }

 

 ex) 예제: 하나의 리스너로 여러버튼 다중 처리하기. 

       <문제-버튼1_2_3 순서대로 누를때마다 n번째 버튼이 눌렸어요 뜨게 하기 > 

   

>이벤트 전파
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 요소를 결정하는 과정
- 이벤트의 대상이 window객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않음. 
    (부모자식관계만 전파가 일어난다라고 이해해도 좋다)

- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상요소를 결정하기 위해 이벤트 전파가 일어남(전파되면서 리스너들을 호출)
# 이벤트 전파 방식은 버블링, 캡쳐형 방식으로 나뉨
   1) 버블링: 타겟 -> 부모 방향으로 전파  * 더 많이 씀 (전파 컨트롤하기 더 쉬움)

       .addEventListener(이벤트명,이벤트리스너)
   2) 캡쳐링: 부모 -> 타켓 방향으로 전파

      .addEventListener(이벤트명,이벤트리스너,true) 

 

    *.stopPropagation(); //이벤트 전파를 멈춤

>JQuery(제이쿼리)
 - 오픈소스 기반의 자바스크립트 라이브러리 
 - 문서객체모델(DOM) 과 이벤트(Event)에 관한 처리를 쉽게 구현할 수 있음 
 - Ajax 응용 프로그램도 빠르게 개발이 가능 

1. 공식 사이트 
    http://jquery.com

2. 다운로드 
 1) Download the compressed, production jQuery 3.6.0
    - 다운받아서 그대로 개발에 사용할 때
 2) Download the uncompressed, development jQuery 3.6.0
    - 오픈소스 기반으로 수정하여 사용할 때 

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 링크 우클릭

     > 다른 이름으로 링크 저장 > .js 파일 저장하기 

    * 문제점 ->사이트 먹통시, 인터넷 연결안될시 안됨. js파일 저장해서 사용하자! 

 

3.기본 문법
        $(선택자).동작함수();

        선택자 : 함수가 적용되길 원하는 요소 및 속성 
        동작함수 : 선택된 요소에 원하는 동작을 설정