🌳 이벤트리스너 사용 예제
<!-- EventListener -->
<!-- onclick을 부여하지 않고도 onclick과 같은 기능 구현 -->
<!-- HTML 수정이 불가능할 경우 유용함 -->
<!-- 코드를 더 간결하게 만듦 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="3_main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert box</p>
<!-- <button onclick="입력('none')"> X </button> -->
<!-- 위의 코드를 onclick을 사용하지 않고 작성하기 -->
<button id="close"> X </button>
</div>
<button onclick="알림창열기('아이디를 입력하세요.')">버튼1</button>
<button onclick="알림창열기('비밀번호를 입력하세요.')">버튼2</button>
<script>
/* 'close' 아이디를 가진 요소가 클릭이 되면 괄호 안의 코드를 실행함 */
/* 이벤트명 : click, scroll, mouseover 등이 가능함 */
document.getElementById('close').addEventListener('click', function () {
document.getElementById('alert').style.display = 'none'; /* alert창을 닫는 코드 */
});
</script>
</body>
</html>
✔ CSS 파일은 아래 링크에 있음
https://h-developer.tistory.com/25https://h-developer.tistory.com/25
'JavaScript' 카테고리의 다른 글
| 혼자 공부하는 자바 스크립트 1 (0) | 2021.08.12 |
|---|---|
| [JavaScript] CDN을 이용한 jQuery 설치 및 간단한 사용 예제 (0) | 2021.08.10 |
| [JavaScript] 함수 파라미터 사용 예제 및 실습 (0) | 2021.08.06 |
| [JavaScript] function 함수 실습 (0) | 2021.08.06 |
| [JavaScript] selector 셀렉터 실습 (0) | 2021.08.06 |
