이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다.
https://www.w3schools.com/js/js_events.asp
JavaScript Events
JavaScript Events HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. HTML Events An HTML event can be something the browser does, or something a user does. Here are some exa
www.w3schools.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="hello">
</body>
</html>
버튼을 만들어 보았다.
alert 이벤트
여기서 hello 버튼을 눌렀을 때 경고창이 나타나는 이벤트를 사용하고 싶다.
경고창은 alert라는 기능을 사용해야한다.
<input type="button" value="hello" onclick="alert('안녕')">
버튼을 누르면 안녕 이라는 메세지 창이 나타난다,
HTML 설명서에는 "onclick 속성 값으로 반드시 자바스크립트 코드가 와야합니다" 라고 적혀있다.
onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을 때
자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹 브라우저가 실행한다.
그래서 hello 버튼을 클릭했을 때 alert('안녕')라는 코드가 실행 되는 것을 알 수 있다.
이렇게 웹 브라우저 위에서 일어나는 일들을 사건, 영어로 이벤트 라고 한다.
어떤 이벤트가 일어 났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것이 여기서는 onclick 이다.
웹 브라우저에는 무수히 많은 이벤트가 존재한다.
https://www.w3schools.com/tags/ref_eventattributes.asp
HTML Event Attributes
HTML Event Attributes Global Event Attributes HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial. Below
www.w3schools.com
onchange 이벤트
<input type="text" onchange="alert('changed')">
aaa를 입력하고 마우스 커서를 바깥쪽으로 빼면 onchange 이벤트가 발생하여
메세지 창이 나타난다.
여기서 다시 aaa를 쓰고 마우스 커서를 바깥쪽으로 빼면
메세지 창이 나타나지 않는다.
값이 변경되지 않아 이벤트가 실행 되지 않은 것이다.!!!
onkeydown 이벤트
<input type="text" onkeydown="alert('key down')">
텍스트 박스에 키보드에 아무 키를 누르면 실행되는 이벤트 이다.
'JavaScript' 카테고리의 다른 글
| JavaScript 함수 (function) (0) | 2020.12.06 |
|---|---|
| 리팩토링(refactoring) 이란? (0) | 2020.12.06 |
| 조건문 활용- 토글(toggle) (0) | 2020.12.06 |
| script 태그 (0) | 2020.12.06 |
| JavaScript 란? (0) | 2020.12.06 |