[JS-중급편-이벤트] 1. 자바스크립트 이벤트

코딩/Javascript

[JS-중급편-이벤트] 1. 자바스크립트 이벤트

드리프트 2021. 1. 28. 21:01

728x170

눈치채지는 못했겠지만, 대부분의 애플리케이션과 웹사이트는 가만히 있으면 그냥 그 자체로 지루합니다.

애플리케이션과 웹사트가 엄청난 팡파르와 돌풍을 일으키며 시작했지만, 우리가 그 애플리케이션과 상호작용을 하지 않는다면 그 애플리케이션은 가치가 없게 되겠죠.

그 이유는 간단하다.

우리의 애플리케이션(응용 프로그램)은 우리가 하고자 하는 행동에 반응하기 위해 존재합니다.

우리가 침대에서 일어나 하루를 준비하듯 응용 프로그램도 나름 각각의 동기부여가 내재되어 있습니다.

응용 프로그램이 하는 일은 우리가 그 프로그램에게 무엇을 하라고 지시하는 겁니다.

바로 이 점이 오늘의 주제입니다.

우리가 응용 프로그램들에게 무엇을 해야 하는지 지시한다면 반대로 그 프로그램은 어떻게 알아챌까요?

바로 이벤트라는 것에 반응되도록 하는 겁니다.

이 튜토리얼에서는 이벤트가 무엇인지 그리고 어떻게 그것을 사용할 수 있는지 소개할 예정입니다.

이벤트와 자바스크립트

이벤트를 처리하기 위해 우리가 해야 할 두 단계가 있습니다.

1. 이벤트 리스닝 (Listen for events)
2. 이벤트에 반응하기 (React to events)

이 두 단계는 꽤 간단해 보이지만, 우리가 자바스크립트를 다루고 있다는 것을 결코 잊지 말아야 합니다.

자바스크립트는 단순하면서도 어려운 언어이기 때문입니다. 즉, 만만하고 쉽게 생각할 수 없는 언어입니다.

1. 이벤트 리스닝 (Listen for events)

우리가 애플리케이션(응용 프로그램) 안에서 하는 거의 모든 일은 이벤트가 발생되는 결과를 낳습니다.

때때로, 응용 프로그램은 자동으로 로드할 때와 같이 가끔 이벤트를 발생시킵니다.

때때로 응용 프로그램은 우리가 실제로 그것과 상호작용하는 것에 대한 반응으로 이벤트를 발생시킬 겁니다.

주목할 것은 우리가 의도하지 않았지만 응용 프로그램이 계속해서 이벤트를 발생시키고 있다는 겁니다.

여기서 자바스크립트 개발자라면 많은 이벤트에서 우리가 원하는 이벤트만 대응하면 됩니다.

이벤트를 리스닝하는 기능은 전적으로 AddEventListener라는 함수로 처리됩니다.

이 함수는 이벤트가 발생하면 애플리케이션(응용 프로그램)에서 개발자에게 이벤트 발생을 통지하는 역할을 합니다.

이 기능을 사용하는 방법은 다음과 같습니다.

source.addEventListener(eventName, eventHandler, false);

위 코드를 한번 봐서는 별로 도움이 되지 않을 겁니다.

그러니 이 함수의 각 부분이 무엇을 의미하는지 분석해 봅시다.

Source

이벤트를 수신하려는 요소 또는 객체를 통해 addEventListener를 호출합니다.

일반적으로 이는 DOM 요소이지만 document, window 또는 이벤트를 발생하도록 특별히 설계된 모든 객체 일 수도 있습니다.

Event Name

addEventListener 함수에 지정하는 첫 번째 인수는 수신하려는 이벤트의 이름입니다.

우리가 처리 할 수 있는 이벤트의 전체 목록은 너무 커서 여기에 나열할 수 없습니다.

가장 일반적인 이벤트 중 일부는 다음과 같습니다.

click, mousemove, mouseover, mouseout, dbclick, DOMContentLoaded, load, keydown, keyup, scroll

다음 강좌에서 위 이벤트에 대해 자세히 살표 볼 예정이며, 여기서는 가장 기본적인 click 이벤트에 대해 알아 보겠습니다.

Event Handler

두 번째 인수는 이벤트가 발생됐을 때 호출될 함수입니다.

To Capture, or Not to Capture

마지막 인수는 참 또는 거짓으로 구성됩니다.

이 인수가 의미하는 뜻을 완벽히 이해하려면 나중에 배우게 될 이벤트 버블링 강좌에서 자세히 배울 수 있습니다.

이제 우리는 addEventListener 함수와 그 모습을 보았으니,이 함수의 예제를 완벽하게 정리하여 모두 연결해 보겠습니다.

document.addEventListener("click", changeColor, false);

addEventListener는 document 객체에 붙어서 클릭 이벤트가 발생되면 changeColor 함수 (일명 이벤트 핸들러)를 호출하여 이벤트에 반응하도록 합니다.

2. 이벤트에 반응하기 (React to events)

이전 섹션에서 보았 듯이 이벤트 리스닝은 addEventListener에 의해 처리됩니다.

이벤트를 리스닝한 후 수행할 작업은 이벤트 핸들러에 의해 처리됩니다. 이벤트 핸들러는 보통 함수나 객체입니다.

function normalAndBoring() {
    // some normal function
}

일반적인 함수와 이벤트 핸들러로 지정된 함수의 유일한 차이점은 이벤트 핸들러 함수가 addEventListener 호출에서 호출된다는 것입니다 (그리고 Event 객체를 인수로 받습니다).

document.addEventListener("click", changeColor, false);

function changeColor(event) {
  // 이벤트 핸들러 함수, event를 인수로 받는다.
}

이벤트 핸들러 안에 넣은 모든 코드는 addEventListener 함수가 관심을 가지는 이벤트가 우연히 들릴 때 실행됩니다.

간단한 예제

<!DOCTYPE html>
<html>

<head>
  <title>Click Anywhere!</title>
</head>

<body>
  <script>
    document.addEventListener("click", changeColor, false);

    function changeColor() {
      document.body.style.backgroundColor = "#FFC926";
    }
  </script>
</body>

</html>

위 코드를 실행해 보면 다음과 같은 빈 창이 나타납니다.

브라우저의 아무 곳이나 클릭하면 다음과 같이 색이 변합니다.

이 예제 코드가 실행되는 이유는 자바스크립트 코드에 있습니다.

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

addEventListener 호출은 이전에 본 것과 동일하므로 건너뛰겠습니다.

대신 changeColor 이벤트 핸들러에 주의를 기울여야 합니다.

이 함수는 document의 클릭 이벤트가 발생될 때 호출됩니다.

이 함수가 호출되면 body 요소의 배경색을 노란색 음영으로 설정합니다.

Event 인수와 Event 타입

이벤트 핸들러는 이벤트 리스너가 이벤트를 엿들을 때 호출되는 것 이상을 수행합니다.

또한 인수의 일부로 기본 이벤트 객체에 대한 액세스를 제공합니다.

이 이벤트 객체에 쉽게 액세스 하려면 이벤트 핸들러 인수를 변경해야 합니다.

다음은 이벤트 인수를 참조하기 위해 이벤트 이름을 지정하는 예입니다.

function myEventHandler(event) {
    // event handlery stuff
}

이 시점에서 우리의 이벤트 핸들러는 여전히 평범합니다.

단지 하나의 인자, 여기서는 event 인자를 취하는 함수일 뿐입니다.

여기서 event 인자 이름은 어떤 것도 가능하지만 보통 자바스크립트 개발자라면 "event"나 "e"를 사용하는 경향이 있습니다.

다음과 같이 인자 이름을 다르게 해도 기술적으로 잘못된 것은 없습니다.

function myEventHandler(isNyanCatReal) { 
    // event handlery stuff
}

중요한 점은 이벤트 인수가 이벤트 개체를 가리키고 이 개체가 이벤트 발생의 일부로 전달된다는 것입니다.

이 이벤트 개체에는 발생한 이벤트와 관련된 속성이 포함되어 있습니다.

마우스 클릭으로 트리거 되는 이벤트는 키보드 키 누름, 페이지로드, 애니메이션 등에 의해 트리거되는 이벤트와 비교할 때와는 다른 속성을 갖습니다.

대부분의 이벤트는 우리가 의존하게 되는 고유 한 동작을 가지고 있으며 이벤트 객체는 모든 고유성을 보여주는 통로와 같습니다.

우리가 얻을 수 있는 다양한 이벤트와 다양한 이벤트 객체가 있음에도 불구하고 모든 이벤트와 객체가 가지는 공통적인 속성이 있습니다.

이러한 공통성은 모든 이벤트 객체가 기본 이벤트 유형 (기술적으로는 인터페이스)에서 파생되기 때문에 가능합니다. 이벤트 타입에서 가장 많이 쓰이는 속성은 다음과 같습니다.

currentTarget
target
preventDefault
stopPropagation
type

이러한 속성이 무엇을 하는지 완전히 이해하려면 이벤트에 대한 이해를 좀 더 깊게 해야 합니다.

우리는 아직 거기까지 배우지 않았으므로 현재로써는 이러한 속성이 존재한다는 것만 알고 있으면 됩니다. 곧 배우게 될 겁니다.

이벤트 리스너 제거하기

때로는 요소에서 이벤트 리스너를 제거해야 할 때가 생깁니다.

이를 수행하는 방법은 addEventListener와 쌍을 이루는 반대 함수인 removeEventListener 함수를 사용하는 것입니다.

something.removeEventListener(eventName, eventHandler, false);

보시다시피 이 함수는 addEventListener 함수로 받는 인자와 똑같은 인자를 받습니다.

그 이유는 간단합니다.

요소 또는 객체에서 이벤트를 수신할 때 JavaScript는 eventName, eventHandler 및 true / false 값을 사용하여 해당 이벤트 리스너를 고유하게 식별합니다.

이 이벤트 리스너를 제거하려면 정확히 동일한 인수를 지정해야 합니다.

document.addEventListener("click", changeColor, false);
document.removeEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

첫 번째 줄에 추가한 이벤트 리스너는 두 번째 줄의 removeEventListener 호출에 의해 완전히 무력화됩니다.

만약 removeEventListener 호출이 해당 addEventListener 호출로 지정된 것과 다른 인수를 사용한 경우 그 효력이 무시되고 이벤트 수신이 계속됩니다.

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-중급편-이벤트] 3. 마우스 이벤트 (0)	2021.02.07
[JS-중급편-이벤트] 2. 이벤트 캡쳐링, 버블링 (0)	2021.02.01
[JS-중급편-DOM] 6. DOM 생성, 삭제, 복제 (0)	2021.01.24
[JS-중급편-DOM] 5. DOM 탐색 (0)	2021.01.23
[JS-중급편-DOM] 4. javaScript로 CSS 수정하기 (0)	2021.01.20

현재글[JS-중급편-이벤트] 1. 자바스크립트 이벤트

드리프트의 코-자-경