JavaScript의 이벤트 이해하기
페이지 정보
작성자 운영자 작성일 19-06-14 22:12 조회 1,284 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
이전 장에서 브라우저 개발자도구 Console을 사용하여 노드와 요소를 액세스, 트래버스, 추가 / 제거 및 수정하는 방법과 DOM 트리에 대해 배웠습니다.
DOM에 대해 거의 모든 변경 작업을 수행하는 것을 배웠지 만 아직 수동으로 변경 사항을 트리거 해야 하기 때문에 사용자 입장에서는 그리 유용하지 않습니다. 이벤트의 소개와 함께, 우리는 쌍방향 웹 사이트를 만들기 위해 모든 것을 묶는 방법을 배웁니다.
JavaScript의 이벤트는 브라우저에서 발생한 동작입니다.
다음은 웹 사이트에서 발생할 수 있는 일반적인 이벤트의 몇 가지 예입니다.
- 페이지 로드가 완료됩니다.
- 사용자가 버튼을 클릭합니다.
- 사용자가 드롭 다운 위로 마우스를 가져갑니다.
- 사용자가 양식을 제출합니다.
- 사용자가 키보드의 키를 누릅니다.
이번 장에서는 이벤트 핸들러, 이벤트 리스너 및 이벤트 객체가 무엇인지, 이벤트를 처리하는 코드를 작성하는 세 가지 방법 및 가장 일반적인 이벤트 중 일부에 대해 학습합니다.
이벤트 핸들러 및 이벤트 리스너
사용자가 버튼을 클릭하거나 키를 누르면 이벤트가 발생합니다. 구체적으로는 클릭 이벤트 또는 키 누르기 이벤트입니다.
이벤트 리스너는 리스너를 요소에 연결하여 특정 요소가 대기하고 해당 특정 이벤트가 "수신 대기"할 수 있게 합니다.
요소에 이벤트를 할당하는 세 가지 방법으로 인라인 이벤트 처리기, 이벤트 처리기 속성 및 이벤트 수신기가 있습니다. 우리는 이벤트가 트리거 될 수 있는 모든 방법에 익숙하고 각 방법의 장단점에 대해 논의하기 위해 세 가지 방법 모두를 검토 할 것입니다.
인라인 이벤트 처리기 특성
이벤트를 이해하는 가장 간단한 방법은 인라인 이벤트 처리기(inline event handler)입니다. button 요소와 p 요소로 구성된 매우 기본적인 예제부터 시작해 보겠습니다. 버튼을 클릭하여 p의 텍스트 내용을 변경하려고 합니다.
본문에서 버튼이 있는 HTML 페이지부터 시작하겠습니다. 코드를 추가 할 자바 스크립트 파일을 참조 할 것입니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<title>이벤트</title>
</head>
<body>
<!-- 버튼 추가 -->
<button>클릭하세요.</button>
<p>변경되는 영역</p>
</body>
<!-- 자바 스크립트 파일 참조 -->
<script src="js/events.js"></script>
</html>
버튼에 직접 onclick이라는 속성을 추가합니다. 속성 값은 changeText()라는 함수를 만듭니다.
<button onclick="changeText()">클릭하세요.</button>
<p>변경되는 영역</p>
자바 스크립트에서는 그 함수를 만들어서 p 요소의 textContent를 수정합니다.
// 단락의 텍스트 내용을 수정하는 기능
const changeText = () => {
const p = document.querySelector('p')
p.textContent = '인라인 이벤트 처리기 때문에 변경되었습니다.'
}
events.html을 처음 로드 하면 다음과 같은 페이지가 표시됩니다.
이제 버튼을 클릭하면 인라인 이벤트 처리기 때문에 p의 텍스트가 '변경되는 영역'에서 '인라인 이벤트 처리기 때문에 변경되었습니다.'로 변경되었습니다.
인라인 이벤트 처리기는 이벤트를 이해하기 쉽고 간단하지만 일반적으로 테스트 및 교육 목적을 넘어서 사용해서는 안됩니다.
인라인 이벤트 핸들러를 HTML 요소의 인라인 CSS 스타일과 비교할 수 있습니다. 모든 요소에 핸들러를 추가하는 것보다 별도의 스크립트 파일을 통해 완전히 처리되는 JavaScript를 유지하는 것이 더 쉽기 때문에 모든 요소에 인라인 스타일을 만드는 것보다 별도의 스타일 시트를 유지하는 것이 훨씬 쉽습니다.
이벤트 핸들러 속성
인라인 이벤트 핸들러에서 다음 단계는 이벤트 핸들러 속성(event handler property)입니다. 이는 인라인 핸들러와 매우 유사하게 작동합니다. 단, HTML의 속성 대신 JavaScript의 요소 속성을 설정한다는 점만 다릅니다.
설정은 마크 업에 onclick = "changeText()"가 더 이상 포함되지 않는다는 것을 제외하고는 여기에서 동일합니다.
<button>클릭하세요.</button>
<p>변경되는 영역</p>
JavaScript의 button 요소에 액세스 해야 하는 것을 제외하고는 함수는 동일하게 유지됩니다. style, id 또는 다른 요소 속성에 액세스하는 것처럼 onclick에 액세스 한 다음 함수 참조를 할당 할 수 있습니다.
// 단락의 텍스트 내용을 수정하는 기능
const changeText = () => {
const p = document.querySelector('p')
p.textContent = '인라인 이벤트 처리기 때문에 변경되었습니다.'
}
// 이벤트 핸들러를 button 요소의 속성으로 추가
const button = document.querySelector('button')
button.onclick = changeText
** 이벤트 핸들러는 대부분의 JavaScript 코드가 준수하는 camelCase 규칙을 따르지 않습니다. 코드는 onClick이 아니라 onclick입니다.
이제 버튼을 클릭하면 이전과 같은 효과가 나타납니다. 함수 참조를 onclick 속성에 전달할 때 괄호는 포함하지 않습니다. 그 순간 함수를 호출하지 않고 함수에 대한 참조만 전달하기 때문입니다.
이벤트 핸들러 속성은 인라인 핸들러보다 약간 더 유지 보수가 가능하지만 여전히 동일한 장애물이 있습니다. 예를 들어, 여러 개의 별도 onclick 속성을 설정하면 아래에 설명 된 것처럼 마지막 하나를 제외한 모든 속성이 덮어 쓰게 됩니다.
const p = document.querySelector('p')
const button = document.querySelector('button')
const changeText = () => {
p.textContent = '변경할까요?'
}
const alertText = () => {
alert('경고하나요?')
}
// 이벤트를 덮어 쓸 수 있음
button.onclick = changeText
button.onclick = alertText
위의 예제에서 alert() 코드가 마지막으로 속성에 추가되었으므로 버튼 클릭은 경고만 표시하고 p 텍스트는 변경하지 않습니다.
인라인 이벤트 핸들러와 이벤트 핸들러 속성을 모두 이해하고 이벤트 리스너로 이동해 봅시다.
이벤트 리스너(Event Listeners)
JavaScript 이벤트 핸들러의 최신 추가 기능은 이벤트 리스너(event listener)입니다. 이벤트 리스너는 요소의 이벤트를 감시합니다. 요소의 속성에 직접 이벤트를 할당하는 대신 addEventListener() 메서드를 사용하여 이벤트를 수신합니다.
addEventListener() 에는 두 개의 필수 매개 변수가 있습니다. - 청취 할 이벤트 및 리스너 콜백 기능을 제공합니다.
이벤트 리스너의 HTML은 이전 예제와 동일합니다.
<button>클릭하세요.</button>
<p>변경되는 영역</p>
우리는 여전히 전과 똑같은 changeText() 함수를 사용할 것입니다. 버튼에 addEventListener() 메서드를 연결합니다.
// 단락의 텍스트 내용을 수정하는 기능
const changeText = () => {
const p = document.querySelector('p')
p.textContent = '이벤트 리스너로 인해 변경되었습니다.'
}
// 클릭 이벤트 수신
const button = document.querySelector('button')
button.addEventListener('click', changeText)
처음 두 메서드에서는 click 이벤트를 onclick이라고 했지만 이벤트 리스너에서는 click이라고 합니다. 모든 이벤트 리스너는 단어에서 on을 삭제합니다. 다음 섹션에서는 다른 유형의 이벤트에 대한 더 많은 예제를 살펴 보겠습니다.
우선, 이벤트 리스너는 이벤트 핸들러 속성과 매우 유사하게 보이지만 몇 가지 장점이 있습니다. 아래의 예제와 같이 동일한 요소에 여러 이벤트 리스너를 설정할 수 있습니다.
const p = document.querySelector('p')
const button = document.querySelector('button')
const changeText = () => {
p.textContent = '변경할까요?'
}
const alertText = () => {
alert('경고를 띄울까요?')
}
// 복수의 리스너를 같은 이벤트와 요소에 추가 할 수 있습니다.
button.addEventListener('click', changeText)
button.addEventListener('click', alertText)
이 예제에서는 두 이벤트가 모두 실행됩니다. 흔히 익명 함수가 이벤트 수신기의 함수 참조 대신 사용됩니다. 익명 함수는 명명되지 않은 함수입니다.
// 이벤트 리스너의 익명 함수
button.addEventListener('click', () => {
p.textContent = '변경할까요?'
})
removeEventListener() 함수를 사용하여 요소에서 하나 또는 모든 이벤트를 제거 할 수도 있습니다.
// 버튼 요소에서 경고 기능 제거
button.removeEventListener('click', alertText)
또한 문서 및 창 객체에서 addEventListener()를 사용할 수 있습니다. 이벤트 리스너는 현재 JavaScript에서 이벤트를 처리하는 가장 보편적이며 선호되는 방법입니다.
공통 이벤트(Common Events)
click 이벤트를 사용하여 인라인 이벤트 핸들러, 이벤트 핸들러 속성 및 이벤트 리스너에 대해 배웠지만 JavaScript에는 더 많은 이벤트가 있습니다. 아래에서 가장 일반적인 이벤트 중 일부를 살펴 보겠습니다. Mozilla 개발자 네트워크에서 전체 이벤트 목록을 보십시오.
마우스 이벤트
마우스 이벤트는 가장 자주 사용되는 이벤트 중 하나입니다. 마우스의 단추를 클릭하거나 마우스 포인터를 가리키면 이동하는 이벤트를 나타냅니다.
이러한 이벤트는 또한 터치 장치에 해당하는 동작과 일치합니다.
Event |
Description |
click |
마우스로 요소를 눌렀다 놓을 때 발생합니다. |
dblclick |
요소가 두 번 클릭 될 때 발생합니다. |
mouseenter |
포인터가 요소에 들어갈 때 발생합니다. |
mouseleave |
포인터가 요소를 벗어날 때 발생합니다. |
mousemove |
포인터가 요소 내부를 이동할 때마다 발생합니다. |
클릭은 결합 된 mousedown 및 mouseup 이벤트로 구성된 복합 이벤트로 마우스 버튼을 각각 눌렀을 때 또는 들어 올릴 때 발생합니다.
mouseenter와 mouseleave를 함께 사용하면 마우스 포인터가 요소 위에 있는 한 지속되는 호버 효과가 다시 생깁니다.
양식 이벤트 (Form Events)
양식 이벤트는 입력 요소 (예 : 선택 또는 선택 취소) 및 양식 제출과 같은 양식 관련 작업입니다.
Event |
Description |
submit |
양식이 제출되면 실행됩니다. |
focus |
요소 (예 : 입력)가 포커스를 받을 때 발생합니다. |
blur |
요소가 포커스를 잃을 때 발생합니다. |
JavaScript는 양식을 제출하고 값을 백엔드 언어로 보내는 데 자주 사용됩니다. JavaScript를 사용하여 양식을 보내는 이점은 양식을 제출하기 위해 페이지를 다시 로드 할 필요가 없으며 JavaScript를 사용하여 필수 입력 필드의 유효성을 검증 할 수 있다는 것입니다.
키보드 이벤트
키보드 이벤트는 키 눌렀을 때, 키를 눌렀다 놓을 때 및 키를 개체 위에서 놓았을 때와 같은 키보드 동작을 처리하는 데 사용됩니다.
Event |
Description |
keydown |
키를 누를 때 한 번 발생합니다. |
keyup |
키를 놓을 때 한 번만 발생합니다. |
keypress |
키를 누르고 있는 동안 계속 켜집니다. |
모양이 비슷하지만 keydown 및 keypress 이벤트는 정확히 동일한 키를 모두 액세스하지 않습니다. keydown은 눌려진 모든 키를 인식하지만, 키 누르기는 SHIFT, ALT 또는 DELETE와 같이 문자를 생성하지 않는 키를 생략합니다.
키보드 이벤트에는 개별 키에 액세스하기 위한 특정 속성이 있습니다. 이 예제에서는 매개 변수를 이벤트 객체라는 이벤트 리스너에 전달합니다. 이 개체를 사용하여 수행 된 작업에 대한 자세한 정보에 액세스 할 수 있습니다.
Property |
Description |
Example |
keyCode |
키에 관한 번호 |
65 |
key |
문자 이름을 나타냅니다. |
a |
'code' |
누른 물리적 키를 나타냅니다. |
KeyA |
아래 예제에서는 키보드 개체, keyCode, 키 및 코드와 관련된 세 가지 속성을 테스트합니다. 설정이 끝나면 a와 같이 키보드의 키를 누를 수 있습니다.
// keyCode, key 및 code 속성 테스트
document.addEventListener('keydown', event => {
console.log('key: ' + event.keyCode)
console.log('key: ' + event.key)
console.log('code: ' + event.code)
})
keyCode: 65
key: a
code: KeyA
keyCode 속성은 눌린 키와 관련된 숫자입니다. 키 속성은 변경할 수 있는 문자의 이름입니다. 예를 들어 Shift 키를 누른 상태에서 a를 누르면 A 키가 됩니다. code 속성은 키보드의 실제 키를 나타냅니다.
** keyCode는 더 이상 사용되지 않으므로 새 프로젝트에서 코드를 사용하는 것이 좋습니다.
이벤트 개체 (Event Objects)
Event 객체는 모든 이벤트에서 액세스 할 수 있는 속성 및 메서드로 구성됩니다. 일반 Event 객체 외에도 각 이벤트 유형에는 KeyboardEvent 및 MouseEvent와 같은 자체 확장이 있습니다.
Event 객체는 매개 변수로 리스너 함수를 통해 전달됩니다. 대개 이벤트 또는 e로 작성됩니다. keydown 이벤트의 code 속성에 액세스하여 PC 게임의 키보드 컨트롤을 복제 할 수 있습니다.
<p></p>
그런 다음, 브라우저의 개발자 콘솔에 다음 JavaScript 코드를 입력하십시오.
// 리스너에게 이벤트 전달
document.addEventListener('keydown', event => {
var element = document.querySelector('p')
// keydown 코드에 대한 변수 설정
var a = 'KeyA'
var s = 'KeyS'
var d = 'KeyD'
var w = 'KeyW'
// 각 코드의 방향 설정
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 키 중 하나를 누르면 다음과 비슷한 출력이 표시됩니다.
여기에서 브라우저가 응답하는 방법과 사용자가 해당 키를 누르는 방법을 계속 개발하고 보다 역동적 인 웹 사이트를 만들 수 있습니다.
다음으로 가장 자주 사용되는 이벤트 속성인 target 속성 중 하나를 살펴 보겠습니다. 다음 예제에서는 한 섹션 안에 세 개의 div 요소가 있습니다.
<section>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</section>
event.target을 사용하여 하나의 이벤트 리스너를 외부 섹션 요소에 배치하고 가장 깊게 중첩 된 요소를 가져올 수 있습니다.
const section = document.querySelector('section')
// 선택한 대상 출력
section.addEventListener('click', event => {
console.log(event.target)
})
이러한 요소 중 하나를 클릭하면 event.target을 사용하여 콘솔에 특정 요소를 출력합니다. 많은 중첩 요소에 액세스하는 데 사용할 수 있는 이벤트 리스너를 하나만 배치 할 수 있으므로 매우 유용합니다.
이벤트는 클릭, 마우스 오버, 양식 제출, 페이지 로딩 또는 키보드의 키 누르기와 같은 웹 사이트에서 수행되는 작업입니다. 자바 스크립트는 사용자가 취한 행동에 웹 사이트가 반응 할 수 있게 되면 진정으로 상호 작용적이고 역동적입니다.
우리는 이벤트가 무엇인지, 일반적인 이벤트의 예, 이벤트 핸들러와 이벤트 리스너의 차이점 및 Event 객체에 액세스하는 방법을 배웠습니다. 이 지식을 사용하여 동적 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
댓글목록 0
등록된 댓글이 없습니다.
