JavaScript 이벤트(Events)

이벤트는 사용자나 브라우저 자체가 시작할 수 있는 브라우저에서 발생하는 작업입니다

웹사이트에서 발생할 수 있는 일반적인 이벤트의 예제는 다음과 같습니다:

• 페이지가 로드되었습니다

• 사용자가 버튼을 클릭합니다

• 사용자가 문서를 스크롤합니다

• 사용자가 브라우저 크기를 조정합니다

• 사용자가 마우스를 움직입니다

• 사용자가 양식을 제출합니다

• 사용자가 키보드의 한 키를 누릅니다

• HTML 입력 필드가 변경됨

모든 사용 가능한 이벤트는이벤트 처리기이이벤트 처리기은 코드 블록(일반적으로 사용자 정의 JavaScript 함수)으로, 이벤트가 트리거될 때 실행됩니다

이벤트를 이해하면 최종 사용자에게 더 반응형 있는 웹 경험을 제공할 수 있습니다

간단한 예제

이벤트가 트리거될 때, 예를 들어 사용자가 버튼을 클릭할 때, JavaScript 코드 블록을 실행할 수 있습니다

아래의 예제에서, 버튼을 누르면 다음과 같은 함수를 호출합니다:showDate()함수:

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

JavaScript showDate()함수는 다음과 같이 보입니다:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

이벤트 사용 방법

이벤트가 트리거될 때마다 요소에 이벤트를 할당하여 실행할 수 있는 세 가지 방법이 있습니다:

• 인라인 이벤트 처리기

• 이벤트 처리기 속성

• 이벤트 리스너

모든 세 가지 방법을 소개하여 이벤트를 트리거하는 방법에 대해 알려드리겠습니다

인라인 이벤트 처리기 속성

이벤트를 HTML 요소에 할당하려면, 다음과 같이 사용할 수 있습니다HTML 이벤트 속성。

아래의 예제에서, 사용자가<p>요소를 클릭할 때, 그 내용이 변경됩니다:

<p onclick="this.innerHTML = 'Hello world'">이곳을 클릭하여 텍스트 변경</p>

아래의 예제에서, 사용자가<p>요소를 클릭할 때, 함수가 호출됩니다:

<p onclick="changeText(this)">이곳을 클릭하여 텍스트 변경</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

아래의 예제에서, 버튼을 누르면 배경이 랜덤한 색상으로 변경됩니다:

<button onclick="bgChange()">Click me</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

내장 이벤트 처리기는 이벤트를 이해하는 간단한 방법이지만, 일반적으로 테스트 및 교육 목적으로만 사용되어야 합니다.

이벤트 처리기 속성

내장 이벤트 처리기의 다음 단계는이벤트 처리기 속성이는 내장 이벤트 처리기와 매우 유사하지만, JavaScript에서 요소의 속성을 설정하는 것이 아니라 HTML 속성을 설정합니다.

아래의 예제에서, "para" id를 가진 HTML 요소에 onclick 이벤트를 할당합니다:

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

이벤트 처리기 속성을 이름 함수 이름에 설정할 수도 있습니다:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

위의 예제에서, 이름이changeText의 함수를 가진id="para"의 HTML 요소.

이 요소를 클릭할 때 이 기능이 실행됩니다.

아래의 예제에서, 버튼을 누르면 배경이 랜덤한 색상으로 변경됩니다:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

주의:이벤트 처리기이를 따르지 않습니다대부분의 JavaScript 코드가 따르는 camelCase 표기법. 주의하시오, 코드는onclick이건 아닙니다onClick。

onfocus와 onblur 이벤트

onfocus 요소가 포커스를 얻을 때 이 이벤트가 발생합니다.

onblur 요소가 포커스를 잃을 때 이 이벤트가 발생합니다.

<input type="text" onfocus="func1(this)" onblur="func2(this)

onchange 이벤트

onchange 요소의 값이 변경될 때 이 이벤트가 발생합니다.

<input type="text" onchange="myFunc(this)" value="Hello">

onmouseover와 onmouseout 이벤트

onmouseover 포인터 장치(대부분 마우스)를 요소나 그 자식 요소 중 하나에 이동할 때 이 이벤트가 발생합니다.

onmouseout 포인터 장치(대부분 마우스)를 요소나 그 자식 요소 중 하나에서 벗어날 때 이 이벤트가 발생합니다.

더 읽어보기

HTML 참조:HTML 이벤트 속성 참조

JavaScript 참조:HTML DOM 이벤트 객체 참조