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

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 사용

출처
https://opentutorials.org/module/904/6629

이벤트 - 웹브라우저 JavaScript

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

opentutorials.org