javascript

JavaScript에서 이벤트 이해 - JavaScript guide

조회 393 (작성일 2019.10.28 11:33)
- 음성
- 목록

목차

JavaScript에서 이벤트 이해

소개

DOM 시리즈 이해에서는 DOM 도구와 Developer Tools Console을 사용하여 노드 및 요소에 액세스, 탐색, 추가 및 제거 및 수정하는 방법에 대해 설명했습니다.

이 시점에서 우리는 지금 사용자의 관점에서 우리는 DOM에 원하는 거의 모든 변화를 만들 수 있지만 우리가 수동으로 만 변화를 촉발했기 때문에 매우 도움이 되지 않습니다. 이벤트에 대해 배움으로써 대화 형 웹 사이트를 만들기 위해 모든 것을 하나로 묶는 방법을 이해할 것입니다.

이벤트는 사용자 나 브라우저 자체에서 시작할 수 있는 브라우저에서 수행되는 작업입니다. 다음은 웹 사이트에서 발생할 수 있는 일반적인 이벤트의 몇 가지 예입니다.

페이지 로딩이 완료되었습니다
사용자가 버튼을 클릭
사용자가 드롭 다운 위로 마우스를 가져갑니다.
사용자가 양식을 제출
사용자가 키보드에서 키를 누릅니다

이벤트시 실행되는 JavaScript 응답을 코딩함으로써 개발자는 사용자에게 메시지를 표시하고, 데이터를 검증하고, 버튼 클릭에 반응하고, 기타 여러 작업을 수행 할 수 있습니다.

이 기사에서는 이벤트 핸들러, 이벤트 리스너 및 이벤트 객체에 대해 설명합니다. 또한 이벤트를 처리하기 위한 코드를 작성하는 세 가지 방법과 가장 일반적인 이벤트 몇 가지를 살펴 보겠습니다. 이벤트에 대해 배우면 최종 사용자를 위한 대화식 웹 환경을 만들 수 있습니다.

https://www.digitalocean.com/community/tutorials/understanding-events-in-javascript

이벤트 핸들러 및 이벤트 리스너

사용자가 버튼을 클릭하거나 키를 누르면 이벤트가 시작됩니다. 이를 각각 클릭 이벤트 또는 키 누르기 이벤트라고 합니다.

이벤트 핸들러는 이벤트가 발생할 때 실행되는 JavaScript 함수입니다.

이벤트 리스너는 반응형 인터페이스를 요소에 연결하여 특정 요소가 주어진 이벤트가 발생하기를 기다렸다가 "듣습니다".

요소에 이벤트를 지정하는 세 가지 방법이 있습니다.

인라인 이벤트 핸들러
이벤트 핸들러 속성
이벤트 리스너

이벤트가 트리거 될 수 있는 각 방법에 익숙해 지도록 세 가지 방법을 모두 살펴보고 각 방법의 장단점에 대해 논의합니다.

인라인 이벤트 핸들러 속성

이벤트 핸들러에 대한 학습을 시작하기 위해 먼저 인라인 이벤트 핸들러를 고려합니다. 버튼 요소와 p 요소로 구성된 매우 기본적인 예부터 시작하겠습니다. 사용자가 버튼을 클릭하여 p의 텍스트 내용을 변경하기를 원합니다.

본문에 버튼이 있는 HTML 페이지부터 시작하겠습니다. 우리는 약간의 코드를 추가 할 JavaScript 파일을 참조 할 것입니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

  <!-- Add button -->
  <button>Click me</button>

  <p>Try to change me.</p>

</body>

<!-- Reference JavaScript file -->
<script src="js/events.js"></script>

</html>

버튼에 직접 onclick이라는 속성을 추가합니다. 속성 값은 changeText()라는 함수가 됩니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

    <button onclick="changeText()">Click me</button>

    <p>Try to change me.</p>

</body>

<script src="js/events.js"></script>

</html>

여기에 js/ 디렉토리에 있는 events.js 파일을 만들어 봅시다. 그 안에 p 요소의 textContent를 수정하는 changeText() 함수를 만듭니다.

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an inline event handler.";
}

events.html을 처음 로드 하면 다음과 같은 페이지가 표시됩니다.

First rendering of events.html

그러나 귀하 또는 다른 사용자가 버튼을 클릭하면 p 태그의 텍스트가 [나를 변경하려고 시도]에서 변경됩니다. 인라인 이벤트 핸들러로 인해 변경되었습니다. :

First response to event on events.html rendering

인라인 이벤트 처리기는 이벤트 이해를 시작하는 간단한 방법이지만 일반적으로 테스트 및 교육 목적 이외의 용도로 사용해서는 안됩니다.

인라인 이벤트 핸들러를 HTML 요소의 인라인 CSS 스타일과 비교할 수 있습니다. 모든 요소에 핸들러를 추가하는 것보다 별도의 스크립트 파일을 통해 완전히 처리되는 JavaScript를 유지하는 것이 더 쉽 듯이 모든 요소에 인라인 스타일을 작성하는 것보다 별도의 클래스 스타일 시트를 유지하는 것이 훨씬 실용적입니다.

이벤트 처리기 속성

인라인 이벤트 핸들러에서 다음 단계는 이벤트 핸들러 특성입니다. 우리가 HTML의 속성 대신 자바 스크립트에서 요소의 속성을 설정하는 것을 제외하고 이것은 인라인 핸들러에 매우 유사하게 작동합니다.

마크 업에 onclick = "changeText()"를 더 이상 포함하지 않는 것을 제외하고는 여기에서 설정이 동일합니다.

...
<body>

    <button>Click me</button>

    <p>I will change.</p>

</body>
...

JavaScript에서 버튼 요소에 액세스해야 한다는 점을 제외하면 함수는 비슷하게 유지됩니다. style 또는 id 또는 다른 요소 속성에 액세스하는 것처럼 onclick에 간단히 액세스 한 다음 함수 참조를 지정할 수 있습니다.

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

참고 : 이벤트 핸들러는 대부분의 JavaScript 코드가 준수하는 camelCase 규칙을 따르지 않습니다. 코드는 onClick이 아니라 onclick입니다.

페이지를 처음 로드 하면 브라우저에 다음이 표시됩니다.

Initial load of events.html with events handler

이제 버튼을 클릭하면 이전과 비슷한 효과가 있습니다.

Response with events handler of events.html

onclick 속성에 함수 참조를 전달할 때 함수를 호출하지 않고 참조만 전달하므로 괄호를 포함하지 않습니다.

이벤트 처리기 속성은 인라인 처리기보다 약간 유지 관리가 가능하지만 여전히 동일한 장애가 있습니다. 예를 들어, 여러 개의 개별 onclick 속성을 설정하려고 하면 아래에 설명 된 것처럼 마지막 속성을 제외한 모든 속성을 덮어 씁니다.

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

위의 예에서 alert ()코드가 속성에 마지막으로 추가되었으므로 버튼 클릭은 경고만 표시하고 p 텍스트는 변경하지 않습니다.

Final response via events handler of events.html

인라인 이벤트 핸들러와 이벤트 핸들러 속성을 모두 이해하고 이벤트 리스너로 넘어 갑시다.

이벤트 리스너

JavaScript 이벤트 핸들러에 추가 된 최신 기능은 이벤트 리스너입니다. 이벤트 리스너는 요소에서 이벤트를 감시합니다. 이벤트를 요소의 속성에 직접 할당하는 대신 addEventListener() 메서드를 사용하여 이벤트를 수신합니다.

addEventListener()는 두 개의 필수 매개 변수, 즉 수신 할 이벤트 및 리스너 콜백 함수를 사용합니다.

이벤트 리스너의 HTML은 이전 예제와 동일합니다.

...
    <button>Click me</button>

    <p>I will change.</p>
...

우리는 여전히 전과 같은 changeText() 함수를 사용할 것입니다. addEventListener() 메소드를 버튼에 첨부합니다.

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

처음 두 가지 방법에서는 클릭 이벤트를 onclick이라고 하고 이벤트 리스너에서는 클릭이라고 합니다. 모든 이벤트 리스너는 단어에서 on을 떨어 뜨립니다. 다음 섹션에서는 다른 유형의 이벤트에 대한 더 많은 예를 살펴 보겠습니다.

위의 자바 스크립트 코드를 사용하여 페이지를 다시 로드 하면 다음과 같은 결과가 나타납니다.

Event listener response of events.html

처음에는 이벤트 리스너가 이벤트 핸들러 특성과 매우 유사 해 보이지만 몇 가지 장점이 있습니다. 아래 예제와 같이 동일한 요소에 여러 이벤트 리스너를 설정할 수 있습니다.

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

이 예제에서 두 이벤트 모두 발생하여 사용자가 경고를 클릭하면 경고와 수정 된 텍스트를 모두 제공합니다.

종종 이벤트 리스너의 함수 참조 대신 익명 함수가 사용됩니다. 익명 함수는 이름이 지정되지 않은 함수입니다.

// An anonymous function on an event listener
button.addEventListener('click', () => {
    p.textContent = "Will I change?";
});

removeEventListener() 함수를 사용하여 요소에서 하나 또는 모든 이벤트를 제거 할 수도 있습니다.

// Remove alert function from button element
button.removeEventListener('click', alertText);

또한 문서 및 창 객체에서 addEventListener()를 사용할 수 있습니다.

이벤트 리스너는 현재 JavaScript에서 이벤트를 처리하는 가장 일반적이고 선호 되는 방법입니다.

공통 이벤트

클릭 이벤트를 사용하는 인라인 이벤트 핸들러, 이벤트 핸들러 특성 및 이벤트 리스너에 대해 학습했지만 JavaScript에는 더 많은 이벤트가 있습니다. 아래에서 가장 일반적인 몇 가지 이벤트를 살펴 보겠습니다.

마우스 이벤트

마우스 이벤트는 가장 자주 사용되는 이벤트 중 하나 입니다. 마우스 버튼을 클릭하거나 마우스 포인터를 가져 가거나 이동하는 이벤트를 나타냅니다. 이러한 이벤트는 또한 터치 장치에서의 동등한 동작에 해당합니다.

Event	Description
`click`	Fires when the mouse is pressed and released on an element
`dblclick`	Fires when an element is clicked twice
`mouseenter`	Fires when a pointer enters an element
`mouseleave`	Fires when a pointer leaves an element
`mousemove`	Fires every time a pointer moves inside an element

클릭은 mousedown 및 mouseup 이벤트를 결합한 복합 이벤트로, 마우스 버튼을 눌렀거나 눌렀을 때 발생합니다.

mouseenter와 mouseleave를 함께 사용하면 마우스 포인터가 요소에 있는 한 지속되는 호버 효과가 다시 만들어집니다.

양식 이벤트

양식 이벤트는 선택 또는 선택되지 않은 입력 요소 및 제출되는 양식과 같은 양식과 관련된 조치입니다.

Event	Description
`submit`	Fires when a form is submitted
`focus`	Fires when an element (such as an input) receives focus
`blur`	Fires when an element loses focus

예를 들어 마우스 클릭을 통해 요소를 선택하거나 Tab 키를 통해 요소를 탐색하면 요소에 초점이 맞춰집니다.

JavaScript는 종종 양식을 제출하고 값을 백엔드 언어로 보내는 데 사용됩니다. JavaScript를 사용하여 양식을 전송하면 페이지를 다시 로드 하지 않아도 양식을 제출할 수 있으며 JavaScript를 사용하여 필수 입력 필드를 확인할 수 있습니다.

키보드 이벤트

키보드 이벤트는 키 누르기, 키 들어 올리기 및 키 누르기와 같은 키보드 동작을 처리하는 데 사용됩니다.

Event	Description
`keydown`	Fires once when a key is pressed
`keyup`	Fires once when a key is released
`keypress`	Fires continuously while a key is pressed

키 다운 및 키 누르기 이벤트는 비슷해 보이지만 정확히 동일한 키에 모두 액세스하지는 않습니다. 키 다운은 눌려진 모든 키를 인식하지만 SHIFT, ALT 또는 DELETE와 같이 문자를 생성하지 않는 키는 생략합니다.

키보드 이벤트에는 개별 키에 액세스 하기 위한 특정 속성이 있습니다.

이벤트 객체라고 하는 매개 변수가 이벤트 리스너로 전달되면 발생한 조치에 대한 추가 정보에 액세스 할 수 있습니다. 키보드 객체와 관련된 세 가지 속성에는 keyCode, key 및 code가 있습니다.

예를 들어, 사용자가 키보드에서 문자 a 키를 누르면 해당 키와 관련된 다음 속성이 나타납니다.

Property	Description	Example
`keyCode`	A number pertaining to the key	65
`key`	Represents the character name	a
`code`	Represents the physical key being pressed	KeyA

JavaScript 콘솔을 통해 해당 정보를 수집하는 방법을 보여주기 위해 다음 코드 줄을 작성할 수 있습니다.

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
    console.log('key: ' + event.keyCode);
    console.log('key: ' + event.key);
    console.log('code: ' + event.code);
});

콘솔에서 ENTER를 누르면 키보드에서 키를 누를 수 있습니다.이 예에서는 a를 누릅니다.

Output

keyCode: 65
key: a
code: KeyA

keyCode 속성은 누른 키와 관련된 숫자입니다. 키 속성은 문자의 이름이며 변경할 수 있습니다. 예를 들어 SHIFT를 사용하여 a를 누르면 키가 A가 됩니다. 코드 속성은 키보드의 물리적 키를 나타냅니다.

keyCode는 더 이상 사용되지 않으며 새 프로젝트에서 코드를 사용하는 것이 좋습니다.

자세한 내용은 Mozilla 개발자 네트워크에서 전체 이벤트 목록을 볼 수 있습니다.

이벤트 객체

Event 객체는 모든 이벤트가 액세스 할 수 있는 속성과 메서드로 구성됩니다. 일반 이벤트 객체 외에도 각 이벤트 유형에는 KeyboardEvent 및 MouseEvent와 같은 자체 확장이 있습니다.

Event 객체는 리스너 함수를 매개 변수로 전달합니다. 일반적으로 이벤트 또는 e로 작성됩니다. keydown 이벤트의 code 속성에 액세스하여 PC 게임의 키보드 컨트롤을 복제 할 수 있습니다.

사용해 보려면 <p> 태그가 포함 된 기본 HTML 파일을 만들어 브라우저에로드하십시오.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>

  <p></p>

</body>
</html>

그런 다음 브라우저의 개발자 콘솔에 다음 JavaScript 코드를 입력하십시오.

// Pass an event through to a listener
document.addEventListener('keydown', event => {
    var element = document.querySelector('p');

    // Set variables for keydown codes
    var a = 'KeyA';
    var s = 'KeyS';
    var d = 'KeyD';
    var w = 'KeyW';

    // Set a direction for each code
    switch (event.code) {
        case a:
            element.textContent = 'Left';
            break;
        case s:
            element.textContent = 'Down';
            break;
        case d:
            element.textContent = 'Right';
            break;
        case w:
            element.textContent = 'Up';
            break;
    }
});

a, s, d 또는 w 키 중 하나를 누르면 다음과 유사한 출력이 표시됩니다.

First event object example

여기에서 브라우저가 어떻게 응답하고 사용자가 해당 키를 누르는 방식을 계속 개발하고 더 역동적 인 웹 사이트를 만들 수 있습니다.

다음으로 가장 자주 사용되는 이벤트 속성 중 하나 인 대상 속성을 살펴 보겠습니다. 다음 예에서는 한 섹션 안에 3 개의 div 요소가 있습니다.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>

  <section>
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
  </section>

</body>
</html>

브라우저의 개발자 콘솔에서 JavaScript와 함께 event.target을 사용하여 외부 섹션 요소에 하나의 이벤트 리스너를 배치하고 가장 깊이 중첩 된 요소를 가져올 수 있습니다.

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
    console.log(event.target);
});

해당 요소 중 하나를 클릭하면 event.target을 사용하여 관련 특정 요소의 출력이 콘솔로 리턴 됩니다. 많은 중첩 요소에 액세스하는 데 사용할 수 있는 이벤트 리스너를 하나만 배치 할 수 있으므로 매우 유용합니다.

Second event object example