🤯TIL/Javascript & jQuery

[생활코딩] 이벤트(등록방법 / 전파 / 기본동작의 취소 / 문서로딩 / 마우스 / jQuery 이벤트)

Dorothy_YANG 2023. 3. 14. 18:37
728x90

이벤트란?

  • 사용자가 클릭했을 때, 스크롤을 했을 때, 텍스트 필드의 내용을 바꾸었을 '때'

    - event target : 이벤트가 발생하는 대상   ex) 버튼
    - event type : 이벤트가 발생하는 행위     ex) 클릭, 변경
    - event handler : 어떠한 이벤트가 발생했을 때, 실행할 코드들

등록방법 & inline

  • 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.

 

(1) inline
: 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것

  (this : 이 이벤트가 동작하고 있는 element를 가르킨다. document.getElementById('target') 대신 사용가능)

 

(2) 프로퍼티 리스너

: 이벤트 대상이 되는 객체의 프로퍼티로 이벤트를 등록하는 방식

: 인라인 방식에 비해 HTML과 JS를 분리 가능

 

(3) addEventListener()

: 이벤트 등록하는 가장 권장되는 방식

(첫번째 인자 : 이벤트 객체의 타입, 두번째 인자 : 호출되는 내용)

<input type = "button" id = "target" value = "button" />
<script>
	var t = document.getElementById('target');
    t.addEventListener('click', function(event) {
    	alert('Hello world, '+event.target.value);
    });
</script>

➡ 이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.


이벤트 전파(버를링과 캡처링)

  • HTML 태그는 중첩되어 있다.
    ➡ 이벤트 핸들러가 어떤 순으로 발생하느냐에 따라 나뉜다.

  • (1) 캡처링 capturing
    : event가 위에서 아래로 이벤트 발생 (부모에서 자식으로) / 사용 잘 X
    - event.target : 깊숙한 곳에 위치한 이벤트 대상
    - HTML ➡ BODY ➡ FIELDSET ➡ INPUT 순으로 

  • (2) 버블링 bubbling
    : event가 아래에서(안에서) 위로 이벤트 발생 (자식에서 부모로)
    : 안쪽의 코어에서부터 시작해 커진다. : 거품처럼 커진다? 해서 버블링이란 이름이 붙은 듯
    - INPUT ➡ FIELDSET ➡ BODY ➡ HTML 순으로

stophandler 호출 : 이후에 등장하는 이벤트 핸들러를 끊을 수 있음.


기본동작의 취소

  • 이벤트는 사용자 정의 뿐만 아니라 기본적으로 브라우저가 가지고 있는 이벤트, 동작방법이 있다.

  • inline
    - event 핸들러에 객체로 전달된 event 메소드 중 preventDefault(); 호출하면 기본 이벤트 동작이 취소됨

  • 사용자가 입력한 정보를 서버로 전송할 때 사용하는 form
    - submit : 유효성 검사 가능
    - blur : 텍스트 필드 빠져나올때 생
    - focus : 텍스트 필드 선택 시 강조되는 효과

문서로딩

  • 웹페이지를 프로그래밍으로 제어하기 위해 웹페이지의 모든 요소에 대한 처리 필요
  • 이것을 알려주는 이벤트가 load, DOMContentLoaded

  • <script> 후 <body> 순으로 나와있을 경우, body 내 id 사용 시 null 값이 출력됨
  • 😎 해결방법
    - window.onload : 웹 페이지 전체가 브라우저에서 해석이 다 끝난 후 타겟을 찾는다.
    - window.addEventListener('load', function()); : 상동
    - window.addEventListener('DOMContentLoaded', function()); : 로딩 시간 단축

마우스

  • 이벤트 타입
    - click : 클릭했을 때 발생하는 이벤트. 
    - dblclick : 더블클릭을 했을 때 발생하는 이벤트
    - mousedown : 마우스를 누를 때 발생
    - mouseup : 마우스버튼을 땔 때 발생
    - mousemove : 마우스를 움직일 때
    - mouseover : 마우스가 엘리먼트에 진입할 때 발생
    - mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생
    - contextmenu : 컨텍스트 메뉴가 실행될 때 발생(우클릭)

  • 키보드 조합
    - 마우스 이벤트가 호출될 때 특수키가 눌려진 상태를 감지해야 할 경우
    - 객체의 프로퍼티 사용 / @키가 눌려져 있느냐
  • 종류
    - event.shiftKey
    - event.altKey
    - event.ctrlKey

  • 마우스 포인터 위치
    - clientX와 clientY를 사용

jQuery 이벤트

  • 훨씬 적은 코드로 사용자(개발자) 친화적인 인터페이스를 제공 😎
<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jQuery" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    // 순수하게 구현했을 때
    var target = document.getElementById('pure');
    if(target.addEventListener){
        target.addEventListener('click', function(event){
            alert('pure');
        });
    } else {
        target.attachEvent('onclick', function(event){
            alert('pure');
        });
    }
 
    // jQuery를 사용했을 때
    $('#jquery').on('click', function(event){
        alert('jQuery');
    })
</script>

on API 사용법

(1) 기본 사용법

     - jQuery에서 가장 중요한 이벤트 API

     - 기본 문법 : .on( events [, selector ] [, data ], handler(eventObject) )

 

(2) 필터링

     - selector 파라미터는 이벤트 대상을 필터링함

     - jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있음(미리 등록 가능)

 

(3) 다중 바인딩

     - 하나의 엘리먼트에 여러개의 이벤트 타입 동시등록

 

(4) 이벤트 제거

     - on ➡ off 사용


 

이벤트 - 웹브라우저 JavaScript

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.  onclick 속성의

opentutorials.org

 

728x90