반응형
목차
[Javascript] HTML 이벤트 발생 시 동작 함수
HTML 문서에서 자바스크립트를 이용해서 특정 동작이 발생하면 자바스크립트를 동작시키게 할 수 있습니다. 우선 아래 Syntax를 통해 설명 하겠습니다.
<element event='some JavaScript'>
HTML "element"에서 특정 "event"가 발생하면 "some JavaScript"가 동작 하는 구조 입니다.
element는 div, a, h1, button과 같은 tag가 될 수 있습니다.
HTML DOM에서 제공하는 event가 많이 있는데 주요 이벤트만 정리해서 아래와 같이 테이블로 만들었습니다.
| Event 명 | 설명 |
| onchange | HTML element가 변경될 때 |
| onclick | HTML element를 클릭할 때 |
| onmouseover | HTML element에 마우스 커서를 올려놓을 때 |
| onmouseout | HTML element 밖에 마우스 커서가 존재할때 |
| onkeydown | HTML element에서 키보드 키를 누를 때 |
| onload | 브라우져가 페이지 로딩을 마쳤을 때 |
[Javascript] HTML 이벤트 발생 : 마우스 클릭 이벤트
예제 코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-success" onclick="func1()">onclick</button><br>
<script>
function func1() {
alert("버튼을 클릭하였습니다");
}
</script>
</body>
</html>
결과>>
반응형
[Javascript] HTML 이벤트 발생 : 마우스 커서 오버 이벤트
예제 코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info" onmouseover="func2()">onmouseover</button><br>
<script>
function func2() {
alert("버튼에 마우스를 올려 놓았습니다");
}
</script>
</body>
</html>
결과>>
[Javascript] HTML 이벤트 발생 : 키보드 입력 이벤트
예제 코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-warning" onkeydown="func3()">onkeydown</button><br>
<script>
function func3() {
alert("버튼에서 키보드를 눌렀습니다.");
}
</script>
</body>
</html>
결과>>
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] 타입 확인하는 방법, 정수(int)/문자(string) 변환 (0) | 2021.10.22 |
|---|---|
| [Javascript] 변수, 함수 - 예제 HTML 출력(변수 입력 받아서 더하기 빼기 alert 출력) (0) | 2021.10.21 |
| [Javascript] HTML 태그 사이 글짜, 요소 가져오기 (getElementById, getElementsByClassName, getElementsByName, getElementsByTagName) (0) | 2021.10.18 |
| [Javascript] HTML문서에 시간 입력하거나 글쓰기 (document.write) (0) | 2021.10.17 |
| [Javascript] jquery animate() 애니매이션 기능 (0) | 2021.09.29 |