이벤트

1. 마우스 이벤트

• click
• dbclick: 더블 클릭
• mousedown: 마우스 누르는 동안
• mousemove: 마우스 이동
• mouseover: 마우스 위로 올렸을 때
• mouseout: 마우스 벗어났을때
• mouseup

✔️ 사용 예시

    <div>
        <img src="../HTML5&CSS/image/1.jpg" id="cover">
    </div>
    <button id="btn">클릭하기</button>
    <script>
        var coverimage = document.querySelector("#cover");
        coverimage.onmouseover=function(){
            coverimage.style.border="2px solid black"
        }
        var btn = document.querySelector("#btn");
        btn.onclick=function(){
            alert("클릭했습니다. ");
        }
    </script>

✔️ 사용 예시

    <div>
        <h1>할 일 목록</h1>
    </div>

    <ul id="list">
        <li><span class="task">할 일 1</span></li>
        <li><span class="task">할 일 2</span></li>
        <li><span class="task">할 일 3</span></li>
        <li><span class="task">할 일 4</span></li>
        <li><span class="task">할 일 5</span></li>
    </ul>

    <script>
        var tasks = document.querySelectorAll(".task");
        for(var i = 0; i < tasks.length; i++){
            tasks[i].onmouseover=function(){
                this.style.color="black";
            };
            tasks[i].onmouseout=function(){
                this.style.color="lightgray";
            }
        }
    </script>

2. 키보드 이벤트

• keypress
• keydown
• keyup

3. 문서 로딩 이벤트

• abort: 문서가 완전히 불러와지기 전에 발생하는 이벤트
• error
• load: 문서 로딩이 끝났을 때
• resize
• scroll
• unload

4. 폼 이벤트

• blur
• change
• focus
• reset
• submit

5. 여러 이벤트를 한 번에 처리

addEventListner을 이용하여 여러가지 이벤트를 한 번에 처리할 수 있다.

    <div>
        <img src="../HTML5&CSS/image/1.jpg" id="pic">
    </div>

    <script>
        var pic = document.querySelector("#pic");
        pic.addEventListener("mouseover", changePic);
        pic.addEventListener("mouseout", originPic);

        function changePic(){
            pic.src="../HTML5&CSS/image/2.jpg";
        }
        function originPic(){
            pic.src = "../HTML5&CSS/image/1.jpg";
        }
    </script>

jQuery

https://cdnjs.com/libraries/jquery/3.6.0

$("선택자").메서드(매개변수, 매개변수)

선택자

• 전체 선택자
  {} => $("")

• 아이디 선택자
  #아이디명{} => $("#아이디명")

• 클래스 선택자
  .클래스명{} => $(".클래스명")

• 태그(요소)선택자
  태그명{} => $("태그명")

• 그룹 선택자
  선택자명, 선택자명{} => $("선택자명, 선택자명")
  

• 자식 선택자
  선택자명 > 선택자명{} => $("선택자명 > 선택자명")

• 후손 선택자
  선택자명 선택자명{} => $("선택자명 선택자명")

  $(document) => 페이지를 나타내는 jquery 객체를 생성

  • 사용 예시

<p>javascript</p>
<p>jQuery</p>
<button>확인</button>

<script src="js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css("color","red");
        });
    });
</script>