자바 스크립트 모든 이벤트 감지 - jaba seukeulibteu modeun ibenteu gamji

Be Coder

웹

JavaScript - 이벤트

ForzaCoding 2020. 3. 15. 23:58

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

이벤트 핸들러 : 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

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. 일부는 사용자가 생성한 것이고, 일부는 API 에 의해 생성된 것입니다(애니메이션의 실행 종료, 비디오의 일시정지 등을 나타내는 이벤트 등). 이벤트는 보통 "외부" 소스 같은것에 의해 실행되지만, 엘리먼트의 HTMLElement.click() 메소드를 호출하거나, 이벤트를 정의한 후 EventTarget.dispatchEvent() 을 사용해 지정한 타겟으로 전송하는 방식을 통해 프로그래밍

developer.mozilla.org

이벤트 참고 사이트

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

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

<< 삽질의 연속 >>

cofs.tistory.com

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

Javascript

joshua1988.github.io

콜백과 재귀함수

http://tcpschool.com/javascript/js_intro_syntax

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

javascript 익명함수 간단정리

javascript에서는 함수를 선언하는 방법이 다양합니다. 함수 선언하는 방법에 대해서 간단히 알아보고, 언제 사용되는지 알아보도록 하겠습니다. 함수 선언 종류와 사용법 일반적인 방법 function testFuction ()..

ithub.tistory.com

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

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

콜백 함수란? 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 그럼 콜백 함수가 어떻게 사용되는지..

webcoding.tistory.com

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

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

최근 들어 node.js를 이용한 서버사이드 프로그래밍이 증가하면서 callback함수에 대한 이해도를 높일 필요가 있었습니다. 우리가 DOM을 다룰때 가장 흔히 사용하는 라이브러리인 jQuery도 대부분의 이벤트를 call..

yubylab.tistory.com

클로저

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

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

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

Closure

클로저(closure)는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가리킨다.이 예제는 내부함수 inner에서 title을 호출했을 때, 외부함수 outter의 지역변수인 title에 접근할 수 있음을 보여준다.위 예제의 마지막 두 행을 보면 함수 outter를

velog.io

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

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

* 원문 : A Beginner’s Guide to Currying in Functional JavaScript [https://www.sitepoint.com/currying-in-functional-javascript/] - M. David Green [https://twitter.com/mdavidgreen] -------------------------------------------------------------------------------

sujinlee.me

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

Curring(커링)이란?

커링(Currying) 커링(Curring)이란? 커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다. 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예를 들어 위의 함수가 제대로...

velog.io

생성자 함수

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

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

javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype) * 목차 * 1. 생성자 란? 2. 생성자의 필요성? 3. 생성자의 형태 4. 생성자의 사용법 5. 생성자 함수에서 사용되는 함수 정의 6. Prototype 이란..

doitnow-man.tistory.com

https://victorydntmd.tistory.com/51

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

2019. 06. 04 수정 1. JS 객체 JS 객체는 다른 객체지향 프로그래밍 언어의 객체와 조금 다른점이 있습니다. 1) prototype 기반의 언어 Java와 C++은 클래스(Class) 기반의 객체지향 언어인 반면, JS는 prototype..

victorydntmd.tistory.com