JavaScript - 이벤트

이벤트 : 웹 브라우저에서 웹 문서에 특별한 일이 있을 때 발생하는 신호

 

이벤트 핸들러 : DOM객체에 할당되어 해당 객체의 이벤트 반응에 호출되어 처리되는 프로퍼티

이벤트 핸들러 역할 : 이벤트 발생 감지 -> 이벤트 감지 -> 지정된 자바스크립트 코드 또는 함수 호출

 

이벤트 모델 : 이벤트 핸들러와 이벤트 API의 정의

-> 웹 브라우저와 시기별로 3가지의 다른 이벤트 모델 존재(이유 ㅣ 웹브라우저의 종류에 따라 변화되고 개선)

 

- 기본 이벤트 모델 : 가장 오래됬으며 보편적. DOM Level 0 이벤트 모델

- 표준 이벤트 모델 : 기본 이벤트 모델 개선 및 표준화. DOM Level2 이벤트 모델.

- IE 이벤트 모델 : 다른 웹 브라우저에서 지원 안됨.

 

 

이벤트 모델의 이벤트 핸들러 종류

1. 마우스 관련

onclick  // 마우스 클릭 감지
onmousedown  // 마우스 단추 눌렸는지 감지
onmouseup  // 눌려젔던 마우스 단추가 올려졌는지 감지
onmouseover  // 커서가 특정 객체 위에 있는지 감지
onmouseout  // 커서가 특정 객체에서 벗어났는지 감지
onmousemove  // 마우스 커서 이동 감지

2. 로딩 관련 이벤트 핸들러

onload  // 이미지 또는 화면 로딩이 완료됬는지 감지
onunload // 현재 화면에서 벗어날때를 감지(페이지 이동)

3. 서식 관련 이벤트 핸들러

onsubmit / onreset    // 서식이 전송 / 재설정 될 때를 감지 
onfocus / onblur      // 특정 서식 요소에 마우스 커서나 텍스트 커서가 접근or벗어남을 감지

4. 키보드 관련 이벤트 핸들러

onkeydown   // 키보드 눌렸는지 감지
onkeypress  // 키보드가 눌려지고 있는지 감지
onkeyup     // 눌려진 키보드가 올려졌는지 감지

5. 그 외 HTML5 이벤트 핸들러

onbeforeonload // 도큐먼트 로딩전에 이벤트 감지
onhaschange // 도큐먼트에 변화가 있을 때 발생하는 이벤트 감지
oninput // 서식에서 사용자 입력이 있을때 이벤트 감지
onmousewheel //  마우스 휠 감지
onplay //  로딩된 미디어파일 재생될때 감지

 

 

 

 

이벤트 핸들러 사용법

> 프로그래머는 특정 객체에 이벤트 핸들러 지정 -> 지정 객체에 이벤트 발생 -> 이벤트 핸들러는 이벤트 감지하고, 정의한 행동 실행

 

> 이벤트 핸들러 지정 방법 -> HTML요소에 직접 지정    /   JavaScript에 이벤트 핸들러 적용

 

-  HTML요소에 직접 지정

: 이벤트 감지 노드(DOM 객체)에 직접 속성형태로 이벤트 핸들러를 적용

<a href = "#"onclick = "var i = 3, j =- 5; calc = i*j; alert(calc); " > 작동! </a>

// 3줄짜리 자바스크립트 코드가 있음.

// 작동! 누르면
// mousedown, mouseup, click 이벤트 차례로 발생.
// onlcik 이벤트핸들러가 click이벤트 감지
// 지정된 자바스크립트 코드 실행.

//대신 저렇게 긴 코드는 함수로 만들어 그 함수를 호출하는게 좋음

 

 

- 이벤트 기본 기능 막기

: 기본기능 - 링크를 클릭하면 페이지 이동. 이미지 텍스트 클릭시 선택되는 것.

<a href = "second.html" onclick = "alert("두번째 페이지로 이동?"); return true; > second </a>

// return을 통해 기본 기능 조절
// true면 기본 이벤트 기능 수행(second.html로 이동)
// false면, 기본 기능 수행 안함.(second.html로 이동 안함 - 작동하는 기능 실행 막아서)
// default는 true

 

- 자바스크립트에서 이벤트 할당

문서구조 : HTML

문서 디자인 : CSS

문서 작성 :JavaScript

 

> 이벤트 적용 방법 : 1. 이벤트 핸들러 DOM 객체의 프로퍼티로 입력         2. 자바스크립트 이벤트 할당

window.onload = init;
// 화면 로딩이 완료되면 init함수 실행.
// ()없는게 맞음. HTML 속성의 이벤트 핸들러는 자바스크립트의 리턴값을 할당. 자바스크립트에서 DOM객체 프로퍼티로 적용된 이벤트 프로퍼티는 함수 자체를 호출


//혹은 웹 페이지 내 특정한 객체에 이벤트 핸들러 적용
document.form[0].element[0].onfocus = viewCaution;
document.getElementById("next").onclick = goNext;
// DOM객체 접근 방법 사용하여 접근 후 이벤트 핸들러 적용.

 

> 이벤트 API(이벤트 인터페이스)

- 호출함수는 이벤트 객체를 인자로 받음

- 전달받은 이벤트 객체는 이벤트 API를 이용하여 각종 이벤트 정보를 구함

document.onmousedown = mousePos;

	function mousePos(event){
    	var mousePosX = event.clientX;
        var mousePosY = event.clientY;
  		.... 
    }
    
//  웹 페이지에서 좌표를 얻음.    
//  이벤트 프로퍼티 : clientX, clientY, screenX, screenY, KeyCode, altKey, type, shiftKey

 

 

 

- addEventListener(이벤트 핸들러, 실행될 함수, 이벤트 감지);

ex) document.getElementById("drag").addEventListenser('mousedown', mouseDown, true);

- 기본 이벤트 기능 막기 ==>  event.preventDefault();  :이벤트 API를 이용하여 이벤트 기본 기능 작동을 막음.

 

https://developer.mozilla.org/ko/docs/Web/API/Event#Properties

Event

 

이벤트 참고 사이트

https://cofs.tistory.com/category/language/javascript?page=2

'language/javascript' 카테고리의 글 목록 (2 Page)

 

https://joshua1988.github.io/javascript/

Javascript

 

 

콜백과 재귀함수

http://tcpschool.com/javascript/js_intro_syntax

 

익명함수 : https://ithub.tistory.com/208

javascript 익명함수 간단정리

 

콜백 함수 : https://webcoding.tistory.com/entry/JavaScript-자바스크립트-콜백함수란

[JavaScript] 자바스크립트 콜백(callback)함수란?

 

https://yubylab.tistory.com/entry/자바스크립트의-콜백함수-이해하기

[자바스크립트] 자바스크립트의 콜백함수 이해하기! _ v2

 

 

클로저

함수의 유효 범위 > 함수형 언어라 함수를 기준으로 유효범위 결정 

클로저(closure)는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가리킨다.

https://velog.io/@minjulee97/Closure-gd5qotgz

Closure

커링https://sujinlee.me/currying-in-functional-javascript/

[번역] 초보자를 위한 함수형 자바스크립트 Currying 가이드

 

https://velog.io/@stampid/Curring커링이란

Curring(커링)이란?

 

 

생성자 함수

 

https://doitnow-man.tistory.com/132

[javascript] 7. 자바스크립트 생성자 함수와 프로토타입

https://victorydntmd.tistory.com/51

[JS] 객체(Object)와 생성자 함수