자바스크립트 - 05

월요일좋아·2022년 10월 25일
0

JavaScript

목록 보기
5/6

이벤트와 이벤트 처리기

이벤트

  • 웹 브라우저나 사용자가 행하는 동작
  • 웹 문서 영역 안에서 이루어지는 동작만 가리킴
  • 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생
  • 마우스 이벤트
    • click : HTML 요소를 클릭할때
    • dbclick : HTML 요소를 더블클릭할때
    • mousedown : 요소 위에서 마우스 버튼을 눌렀을때
    • mousemove : 요소 위에서 마우스 포인터를 움질일 때
    • mouseover : 마웅스 포인터가 요소 위로 옮겨질때
    • mouseout : 마우스 포인터가 요소를 벗어날 때
    • mouseup : 요소 위에 놓인 마우스 버튼엥서 손을 뗄 때
  • 키보드 이벤트
    • keydown : 키를 누르는동안 이벤트 발생
    • keypress : 키를 눌렀을 때 이벤트 발생
    • keyup : 키에서 손을 뗄 때 이벤트 발생
  • 문서 로딩 이벤트
    • abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때
    • error : 문서가 정확히 로딩되지 않았을 때
    • load : (잘 안씀) 모든 컨텐츠가 로딩 된 이후
    • resize : 문서 화면 크기가 바뀌었을 때
    • scroll : 문서 화면이 스크롤 되었을 때
    • unload : 문서에서 벗어날 때
  • 폼 이벤트
    • blur : 폼 요소에 포커스를 잃었을 때
    • change : 목록이나 체크 상태 등이 변경되면. (<input>, <select>, <textarea>태그에서 사용)
    • focus : (잘 안씀) 폼 요소에 포커스가 놓였을 때(<label>, <select>, <textarea>, <button> 태그에서 사용)
    • reset : (잘 안씀) 폼이 리셋되었을 때
    • submit : submit 버튼을 클릭했을 때

이벤트 처리기

  • <태그 on이벤트명 = "함수명>
  • 이벤트가 발생했을 때 처리하는 함수
<div class="container">
    <!-- html 이벤트 처리기를 이용한 이벤트(인라인방식) -->
    <div id="div01">
        <button class="btn btn-primary" onclick="alert('inline 방식으로 클릭 이벤트 발생')">inline 방식 이벤트</button>
        <button class="btn btn-primary" onclick="popupAlert()">inline 방식에서 함수 호출</button>
    </div>
</div>

부트스트랩 적용

사이트 : https://getbootstrap.com/
head 부분에 입력

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
    <!-- html 이벤트 처리기를 이용한 이벤트(인라인방식) -->
    <div id="div01">
        <button class="btn btn-primary" onclick="alert('inline 방식으로 클릭 이벤트 발생')">inline 방식 이벤트</button>
        <button class="btn btn-primary" onclick="popupAlert()">inline 방식에서 함수 호출</button>
    </div>
</div>

<script>
    function popupAlert() {
        alert("inline 방식으로 클릭 이벤트 발생\n함수 호출하기")
    }
</script>

</body>

DOM을 이용한 이벤트 처리기

DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결
웹 요소.onclick = 함수;

profile
월요일좋아
이전 포스트

자바스크립트 - 04

다음 포스트

자바스크립트 - 06

0개의 댓글