[JavaScript] 자바스크립트 - HTML에서 이벤트로 JS 실행하기

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

ruriruriya

[JavaScript] 자바스크립트 - HTML에서 이벤트로 JS 실행하기 본문

🖌️Web/JavaScript

[JavaScript] 자바스크립트 - HTML에서 이벤트로 JS 실행하기

루리야ㅑ 2024. 4. 4. 11:56

onclick 속성 값으로는 반드시 자바스크립트가 들어가야 한다.
웹브라우저가 기억하고 있다가 onclick 속성의 태그를 사용자가 클릭했을 때 자바스크립트 문법에 따라 웹브라우저가 동작한다.

이러한 것을 이벤트라고 한다.

HTML 속성 JavaScript 이벤트

웹브라우저에서 일어날 수 있는 이벤트 종류에는
대표적으로 클릭 시, 글씨 입력 시 등이 있다.

10개에서 20개 정도 되는 이벤트들을 정의하고 있다.
그 이벤트를 이용하여 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다.

onclick: 요소를 클릭할 때 발생
onmouseover: 요소 위로 마우스를 움직일 때 발생
onmouseout: 요소에서 마우스를 움직일 때 발생
onkeydown: 키보드의 키를 누를 때 발생
onkeyup: 키보드의 키를 뗄 때 발생
onchange: 입력 요소의 값이 변경되었을 때 발생 (주로 input, select, textarea 등에서 사용)
onsubmit: 폼을 제출할 때 발생
onload: 리소스가 로드되었을 때 발생 (주로 window나 이미지 등에서 사용)
onfocus: 요소가 포커스를 받았을 때 발생
onblur: 요소가 포커스를 잃었을 때 발생
onmousemove: 요소에서 마우스를 움직일 때 발생
onmouseup: 마우스 버튼을 누른 후 요소에서 마우스 버튼을 떼었을 때 발생
onmousedown: 요소에서 마우스 버튼을 누를 때 발생
ondblclick: 요소를 더블 클릭할 때 발생
oncontextmenu: 요소에서 컨텍스트 메뉴를 열 때 발생

예시 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <!--이벤트 속성 알아보기-->

        <!--onclick 이벤트 : 버튼 클릭 시 alert 창 띄움-->
        <input type="button" value="Hi" onclick="alert('hi')">

        <!--onchange 이벤트 : 입력 후 브라우저 벗어나면 alert 창 띄움-->
        <input type="text" onchange="alert('changed')">

        <!--onkeydown 이벤트 : 키 입력 시 alert 창 띄움-->
        <input type="text" onkeydown="alert('key down')">

    </body>
</html>

저작자표시 비영리 변경금지

'🖌️Web > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 - 배열(Array)와 객체(Object) (1)	2024.04.14
[JavaScript] 자바스크립트 - undefined와 null 의 차이 (0)	2024.04.08
[JavaScript] 자바스크립트 - const와 let의 차이점, 그리고 var (0)	2024.04.08
[JavaScript] 자바스크립트 - 태그 선택하여 자바스크립트 동작 시키기(querySelector) (0)	2024.04.04
[JavaScript] 자바스크립트 - script 태그 (0)	2024.04.04

'🖌️Web/JavaScript' Related Articles

ruriruriya

[JavaScript] 자바스크립트 - HTML에서 이벤트로 JS 실행하기 본문

[JavaScript] 자바스크립트 - HTML에서 이벤트로 JS 실행하기

HTML 속성 JavaScript 이벤트

예시 코드

'🖌️Web > JavaScript' 카테고리의 다른 글

티스토리툴바