[jQuery] 12장 이벤트

jQuery의 이벤트

기존 자바스크립트의 이벤트와 비슷하다.

jQuery로 이벤트를 연결하는 가장 기본적인 방법은 on( ) 메서드 사용

사용법

$(“p”).click(function(e) {
    var eventType = e.type;
}

이벤트 속성

: 모든 이벤트의 정보를 event 객체로 제공

- 속성
type : 이벤트 종류 (예 : click)
Target : 이벤트가 발생한 객체 (요소)
pageX, pageY : 문서 좌상단을 기준으로 한 마우스 좌표
screen, screen : 화면상의 좌표
Button : 눌러진 마우스 버튼
(0 : 왼쪽 버튼, 1 : 휠(중간)버튼, 2 : 오른쪽 버튼)

- 메소드
preventDefault()
stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
div {
  background-color: black;
  color: white;
  height: 80vh;
  display: flex; /* flex적용시 자식요소들을 inline-block으로 설정함 */
  justify-content: center; /* x축정렬 */
  align-items: center; /* y축정렬 */
  overflow: auto;
}
span {
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>
    <div>
        <span>a</span>
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // mousedown이벤트를 통해 좌중우클릭에 대한 정보를 각 button속성(012) which속성(123)
    // click (좌측클릭을 대상으로만 함)
    $('div').on('mousedown', function(e){
        
        let result = "이벤트 명 : " + e.type + "<br>";
        result += `이벤트 대상요소 : ${e.target} <br>`;
        result += `요소 명 : ${e.target.nodeName} <br>`;
        result += `요소의 자식요소 명 : ${e.target.childNodes[1].nodeName} <br>`;
                                                // 노드속성(nodeValue, data)활용시 textNode까지 접근해야 가능
        result += `자식요소의 자식정보 : ${e.target.childNodes[1].firstChild.data} <br>`;
                                                // 요소노드 대상 속성(textContent, innerText)사용시 직전에서 사용가능
        result += `자식요소의 자식정보 : ${e.target.childNodes[1].textContent} <br>`;
        result += `${e.button}, ${e.which} <br>`;
        result += `마우스 좌표 값 : ${e.pageX}, ${e.pageY} <br><br>`;
        result += `마우스 좌표 값 : ${e.screenX}, ${e.screenY} <br><br>`;

        $(this).append(result); // 화면에 출력
    });

</script>
</body>
</html>

기타 이벤트

메소드	설 명
keypress	키보드 키를 누르고 있을 때 발생
keydown	키보드 키를 누를 때 발생
keyup	키보드 키를 뗄 때 발생
submit	입력 정보를 제출할 때 발생
change	입력 요소의 정보가 변경 되었을 때 발생
focus / blur	입력 요소가 포커스를 얻었을 때 / 잃었을 때
load	DOM이 로드 되었을 때 발생
resize	DOM 사이즈가 변경되었을 때 발생
ready	문서가 완전히 로드 되었을 때 ex) $(document).ready( … )
on / off	선택한 요소에 여러 이벤트를 넣을 때 / 지울 때

마우스 이벤트 예제

마우스를 이미지에 올릴 시 다른 이미지로 변경 및 원복

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 150px;
  height: 150px;
}
button {
  display: none;
}
</style>
</head>
<body>
    <img src="../images/mang7.jpg" data-src="../images/mang1.jpg">
    <img src="../images/mang10.gif" data-src="../images/mang2.jpg">
    <img src="../images/mang9.jpg" data-src="../images/mang4.jpg">
    <img src="../images/mang3.jpg" data-src="../images/mang5.jpg">
    <br><br>
    <button>보이기</button>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    let v_src; // 선언만

    $('img').on({
        mouseover:function(){
            // 두번째 이미지정보를 보여주기
            v_src = $(this).attr('src'); // img의 src 속성 정보 get
            let v_src2 = $(this).data('src'); // 사용자 정의 속성 get
            $(this).attr('src', v_src2); // set
        }, 
        'mouseout':function(){
            // 기존 이미지정보(첫번째 정보)를 보여주기
            $(this).attr('src', v_src);
        }, 
        "dblclick":function(){
            // 이미지 요소 사라짐 처리 및 버튼 보이기
            }
        }
    });
</script>
</body>
</html>

더블 클릭 시 이미지 사라짐 및 보임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 150;
  height: 150px;
}
button {
  display: none;
}
</style>
</head>
<body>
    <img src="../images/mang7.jpg" data-src="../images/mang1.jpg">
    <img src="../images/mang10.gif" data-src="../images/mang2.jpg">
    <img src="../images/mang9.jpg" data-src="../images/mang4.jpg">
    <img src="../images/mang3.jpg" data-src="../images/mang5.jpg">
    <br><br>
    <button>보이기</button>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    let v_src; // 선언만

    $('img').on({
        mouseover:function(){
            // 두번째 이미지정보를 보여주기
            v_src = $(this).attr('src'); // img의 src 속성 정보 get
            let v_src2 = $(this).data('src'); // 사용자 정의 속성 get
            $(this).attr('src', v_src2); // set
        }, 
        'mouseout':function(){
            // 기존 이미지정보(첫번째 정보)를 보여주기
            $(this).attr('src', v_src);
        }, 
        "dblclick":function(){
            // 이미지 요소 사라짐 처리 및 버튼 보이기
            $(this).hide();
            if( $('img:visible').length == 0 ) {
                $('button').show();
            }
        }
    });

    $('button').on('click', function(){
        $('img').show();
        $(this).hide();
    });

</script>
</body>
</html>

'jQuery' 카테고리의 다른 글

[jQuery] 14장 trigger와 trigger Handler (0)	2024.02.26
[jQuery] 13장 이벤트 연결 메소드 (0)	2024.02.23
[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드 (0)	2024.02.23
[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드 (0)	2024.02.22
[jQuery] 9장 get/set 메소드3 (0)	2024.02.22

'jQuery' 카테고리의 다른 글

티스토리툴바