jQuery (23)

jQuery · 2024.02.26

[jQuery] 14장 trigger와 trigger Handler

[jQuery] 14장 trigger와 trigger Handler

jQuery
jQuery · 2024.02.23

[jQuery] 13장 이벤트 연결 메소드

[jQuery] 13장 이벤트 연결 메소드

jQuery
jQuery · 2024.02.23

[jQuery] 12장 이벤트

[jQuery] 12장 이벤트

jQuery

jQuery

[jQuery] 14장 trigger와 trigger Handler

2024. 2. 26. 16:55

trigger() 함수

: 선택된 요소에 강제로 이벤트를 발생시키는 함수

trigger 적용 전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select id="sido">
        <option value="">선택</option>
        <option value="1">대전광역시</option>
        <option value="2">서울특별시</option>
        <option value="3">세종특별자치시</option>
    </select>
    <select id="gugun"></select>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#sido').change(function(){
        let v_opt = '<option>대덕구</option>';
        v_opt += '<option>동구</option>';
        v_opt += '<option>서구</option>';
        v_opt += '<option>유성구</option>';
        v_opt += '<option selected>중구</option>';

        $('#gugun').html(v_opt);
    });    
</script>
</body>
</html>

trigger 적용 후

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select id="sido">
        <option value="">선택</option>
        <option value="1">대전광역시</option>
        <option value="2">서울특별시</option>
        <option value="3">세종특별자치시</option>
    </select>
    <select id="gugun"></select>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#sido').change(function(){
        let v_opt = '<option>대덕구</option>';
        v_opt += '<option>동구</option>';
        v_opt += '<option>서구</option>';
        v_opt += '<option>유성구</option>';
        v_opt += '<option selected>중구</option>';

        $('#gugun').html(v_opt);
    });

    // trigger - 대상요소에 적용되어 있는 이벤트를 강제적으로 실행시키는 기능
    $('#sido').trigger('change');
    $('#sido option').eq(1).prop('selected', true); // 선택되지 않은 항목에 대해 출력을 강제함

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

html이 아닌 append로 사용할 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select id="sido">
        <option value="">선택</option>
        <option value="1">대전광역시</option>
        <option value="2">서울특별시</option>
        <option value="3">세종특별자치시</option>
    </select>
    <select id="gugun"></select>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#sido').change(function(){
        let v_opt = '<option>대덕구</option>';
        v_opt += '<option>동구</option>';
        v_opt += '<option>서구</option>';
        v_opt += '<option>유성구</option>';
        v_opt += '<option selected>중구</option>';

        // $('#gugun').html(v_opt);
        $('#gugun').text(""); // 영역 초기화 필요
        $('#gugun').append(v_opt); // 계속 추가되는 것을 방지하기 위해
    });

    // trigger - 대상요소에 적용되어 있는 이벤트를 강제적으로 실행시키는 기능
    $('#sido').trigger('change');
    $('#sido option').eq(1).prop('selected', true); // 선택되지 않은 항목에 대해 출력을 강제함

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

사용자 정의 이벤트 : trigger 이용

요소가 한 개 일때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>클릭</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 사용자 정의 이벤트
    // customEvent는 행위가 등록되어 있지 않기에 trigger로 실행시켜줘야 함
    $('p').on('customEvent', function(){ 
        alert();
    });

    $('p').dblclick(function(){
        // 사용자 정의 이벤트를 강제로 실행
        $(this).trigger('customEvent');
    });

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

요소가 여러 개 일때 (배열 형태)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>클릭</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 사용자 정의 이벤트
    // customEvent는 행위가 등록되어 있지 않기에 trigger로 실행시켜줘야 함
    $('p').on('customEvent', function(ev,a,b,c,d,e){ 
        alert( a + b + c + d + e );
    });

    $('p').dblclick(function(){
        // 사용자 정의 이벤트를 강제로 실행
        $(this).trigger('customEvent', ['대', '덕', '인', '재']);
    });

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

요소가 여러 개 일때 (객체 형태)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>클릭</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 사용자 정의 이벤트
    // customEvent는 행위가 등록되어 있지 않기에 trigger로 실행시켜줘야 함
    $('p').on('customEvent', function(ev,a,b,c,d,e){ 
        alert( a + b + c + d + e );
        alert( a[1] + a.two + c + d + e );
    });

    $('p').dblclick(function(){
        // 사용자 정의 이벤트를 강제로 실행
        $(this).trigger('customEvent', {1:'일번', two:'이번'}); // 객체 정보는 하나의 매개변수로 들어감
    });

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

요소가 여러 개 일때 (문자열 형태)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>클릭</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 사용자 정의 이벤트
    // customEvent는 행위가 등록되어 있지 않기에 trigger로 실행시켜줘야 함
    $('p').on('customEvent', function(ev,a,b,c,d,e){ 
        alert("이벤트 명: " + ev.type + " 이벤트 키워드를 통한 이벤트 명: " + event.type);
        alert( a + b + c + d + e );
    });

    $('p').dblclick(function(){
        $(this).trigger('customEvent', 'DDIT', '대덕인재개발원'); // 첫번째 대상 값만 유효하고 두번째 대상부터는 무시됨
    });

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

=> 객체를 통하여 작동하는 걸 권장한다.

지역 별 세부 지역 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select id="sido">
        <option value="">선택</option>
        <option value="1">대전광역시</option>
        <option value="2">서울특별시</option>
        <option value="3">세종특별자치시</option>
    </select>
    <select id="gugun"></select>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#sido').change(function(e,a){
        let sidoVal = this.value;
        let v_opt;

        if(sidoVal == 1 || a == 1) {
            v_opt += '<option>대덕구</option>';
            v_opt += '<option>동구</option>';
            v_opt += '<option selected>서구</option>';
            v_opt += '<option>유성구</option>';
            v_opt += '<option>중구</option>';
        } else if(sidoVal == 2 || a == 2) {
            v_opt += '<option>중구</option>';
            v_opt += '<option selected>마포구</option>';
            v_opt += '<option>용산구</option>';
            v_opt += '<option>서초구</option>';
            v_opt += '<option>동작구</option>';
        } else {
            v_opt = '<option>갑</option>';
            v_opt += '<option selected>을</option>';
        }

        // $('#gugun').html(v_opt);
        $('#gugun').text("");
        $('#gugun').append(v_opt); // 계속 추가되는 것을 방지하기 위해
    });

    // trigger - 대상요소에 적용되어 있는 이벤트를 강제적으로 실행시키는 기능
    $('#sido').trigger('change', 1);
    $('#sido option').eq(1).prop('selected', true); // 선택되지 않은 항목에 대해 출력을 강제함

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

trigger Handler

trigger 이벤트 적용 전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
:focus {
  background-color: gold;
}
</style>
</head>
<body>
    <button>trigger</button>
    <button>trigger Handler</button> <br>
    <input> <br>
    <input> <br>
    <input>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 'focus' 이벤트의 기본 동작 >> 포커싱 >> :focus스타일이 적용됨
    $('input').focus(function(){
        $(this).val('비투비짱');
    });
</script>
</body>
</html>

trigger 이벤트 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
:focus {
  background-color: gold;
}
</style>
</head>
<body>
    <button>trigger</button>
    <button>trigger Handler</button> <br>
    <input> <br>
    <input> <br>
    <input>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 'focus' 이벤트의 기본 동작 >> 포커싱 >> :focus스타일이 적용됨
    $('input').focus(function(){
        $(this).val('비투비짱');
    });

    // trigger - 모든 대상으로 이벤트 기본 동작 수행
    $('button').eq(0).on('click', function(){
        $('input').trigger('focus');
    });

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

trigger Handler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
:focus {
  background-color: gold;
}
</style>
</head>
<body>
    <button>trigger</button>
    <button>trigger Handler</button> <br>
    <input> <br>
    <input> <br>
    <input>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 'focus' 이벤트의 기본 동작 >> 포커싱 >> :focus스타일이 적용됨
    $('input').focus(function(){
        $(this).val('비투비짱');
    });

    // trigger - 모든 대상으로 /이벤트 기본 동작 수행 /DOM 구조에 따라 이벤트 확산(버블링)
    $('button').eq(0).on('click', function(){
        $('input').trigger('focus');
    });
    
    // triggerHandler - 첫번째 요소 대상으로만 / 이벤트 기본 동작 수행 안함 / 함수만 실행 / 이벤트 확산되지 않음(버블링x)
    $('button').eq(1).on('click', function(){
        // 기본 동작 수행 : 포커싱 맞추고 focus 스타일 적용
        $('input').triggerHandler('focus');
    });

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

+ 번외

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
:focus {
  background-color: gold;
}
</style>
</head>
<body>
    <button>trigger</button>
    <button>trigger Handler</button> <br>
    <div>
        <input> <br>
        <input> <br>
        <input>
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    
    $('input').focus(function(){
        $(this).val('비투비짱');
    });

    $('div').click(function(){
        alert();
    });

    $('button').eq(0).on('click', function(){
        $('input').trigger('click');
    });
    
    $('button').eq(1).on('click', function(){
        $('input').triggerHandler('click');
    });
</script>
</body>
</html>

결과 화면12 : trigger Handler를 제외하고는 클릭 시 전부 alert()가 작동됨 > 버블링x 때문

'jQuery' 카테고리의 다른 글

[jQuery] 16장 필터링 (0)	2024.02.26
[jQuery] 15장 DOM 탐색 (0)	2024.02.26
[jQuery] 13장 이벤트 연결 메소드 (0)	2024.02.23
[jQuery] 12장 이벤트 (0)	2024.02.23
[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드 (0)	2024.02.23

jQuery

[jQuery] 13장 이벤트 연결 메소드

2024. 2. 23. 17:53

이벤트 연결 메소드1

아래와 같은 식으로 변화했으며,

현재는 on과 off를 사용한다.

이벤트 연결	이벤트 제거
$(selector).bind(…)	$(selector).unbind(…)
↓	↓
$(selector).live(…)	$(selector).die(…)
↓	↓
$(selector).delegate(…)	$(selector).undelegate(…)
↓	↓
$(selector).on(…)	$(selector).off(…)

on, one, off 사용법

$(selector).on(event, childSelector, data, function)
// 선택된 요소와 하위 요소에 한 개 이상의 이벤트를 바인딩
// 현재 로드 된 요소 및 스크립트로 생성될 새로운 요소에도 적용됨

$(selector).one(event, data, function)
// 선택된 요소와 하위 요소에 한 개 이상의 이벤트를 바인딩. 이벤트가 한번만 수행되고 제거됨

$(selector).off(event, selector, function(eventObj))
// 선택된 요소에 on메소드로 연결된 이벤트를 제거

정적 요소 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.sttBg {
  background-color: black;
  color: white;
}
.dynmBg {
  background-color: hotpink;
  color: lime;
}
.fontGold {
  color: gold;
}
</style>
</head>
<body>
    <p>on(event[, selector][, data], fn) / one(event[,data], fn) / off(event[, selector][, fn]</p>
    <div></div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // data {key:value} 형식으로 작성 후 ebent객체의 data속성으로 key에 접근하여 값을 얻음

    // 정적요소 대상 on()
    $('p').on('mouseover', {static:'정적요소bind방식'},function(e){
        $(this).toggleClass('sttBg');
        // console.log(e.data.static);
        $(this).text(e.data.static);
        
    });
</script>
</body>
</html>

동적 요소 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.sttBg {
  background-color: black;
  color: white;
}
.dynmBg {
  background-color: hotpink;
  color: lime;
}
.fontGold {
  color: gold;
}
</style>
</head>
<body>
    <div></div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 동적 요소 생성
    let addP = $('<p>동적요소1</p><p>동적요소2</p>');
    $('div').append(addP);

    // 동적요소 대상 부모요소.on(event[,childSelector][,data],fn)
    // delegate방식 >> 정적요소 부모에게 이벤트를 주고 자식은 위임받는 형태
    // $(부모).on(이벤트, 이벤트의 적용대상인 자식요소, 함수);
    $('div').on('mouseover', 'p', {dynamic:'동적요소delegate방식'},function(e){
        $(this).toggleClass('dynmBg');
        $(this).text(e.data.dynamic);
    });
</script>
</body>
</html>

off : 이벤트 제거

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.sttBg {
  background-color: black;
  color: white;
}
.dynmBg {
  background-color: hotpink;
  color: lime;
}
.fontGold {
  color: gold;
}
</style>
</head>
<body>
    <p>on(event[, selector][, data], fn) / one(event[,data], fn) / off(event[, selector][, fn]</p>
    <div></div>
    <button>일괄 제거(정적대상으로만)</button>
    <button>동적요소</button>
    <button>특정 이벤트 제거</button>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>

    // 정적요소 대상 on(event[,data],fn)
    $('p').on('mouseover', {static:'정적요소bind방식'},function(e){
        $(this).toggleClass('sttBg');
        $(this).text(e.data.static);
    });

    // 정적대상 이벤트2
    let rmv;
    $('p').on('mouseover', rmv = function(){
      $(this).toggleClass('fontGold');
    });

    // 동적 요소 생성
    let addP = $('<p>동적요소1</p><p id="pp">동적요소2</p>');
    $('div').append(addP);

    $('div').on('mouseover', 'p', {dynamic:'동적요소delegate방식'},function(e){
        $(this).toggleClass('dynmBg');
        $(this).text(e.data.dynamic);
    });

    $('div').on('mouseover', '#pp', function(){
      alert('접근시 알람');
    });

    $('button').eq(0).on('click', function(){ // 바인딩 - 정적요소 대상
      // 동적인 방식으로 만들어진 것은 제거되지 않음
      $('p').off('mouseover'); // p요소에 부여된 마우스 오버 이벤트 제거
    
      $('p').text('배경색 토글 이벤트가 제거되었음');
    });
      
    $('button').eq(1).on('click', function(){
      // 동적대상 이벤트 제거는 - 부모의 이벤트를 제거해야 함
      $('div').off('mouseover'); // 동적대상의 부모에게 부여된 이벤트를 제거
    });
      
    $('button').eq(2).on('click', function(){
      // 같은 이벤트 중 일부분의 처리만 제거
      $('p').off('mouseover', rmv);
      $('div').off('mouseover', '#pp');
    });
</script>
</body>
</html>

결과 화면3-1 : 일괄 제거 버튼 클릭 시 상단에 있는 정적 대상만 제거되고 다른 것은 변경됨

결과 화면3-3 : 특정 이벤트 제거 버튼 클릭 시 마지막 동적요소2에 있는 알람이 작동하지 않음

이벤트 연결 메소드 (bind) : 정적 대상 방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    bind
    실행(로딩)전 document에 생성되어 있는 요소에만 이벤트 핸들러가 동작
    (*동적 요소에는 이벤트 핸들러(처리기)가 동작하지 않음) <br><br>

    <div class="wrapper">
        <input type="button" class="btn" value="정적버튼">
        <input type="button" id="clear" value="해제">

        <!-- 동적버튼이 위치할 지정 -->
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 정적 대상 방식
    let bb = $('<input type="button" class="btn" value="bird 버튼">');
    $('.wrapper').append(bb);

    // bind(event, fn)
    $('.btn').on('click', function(){ // 정적대상 방식
        $('<input>',{
            type: 'button',
            class: 'btn',
            value: '새 버튼'
        }).appendTo('.wrapper');
    });

    $('#clear').click(function(){
        $('.btn').off('click');
    });

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

결과 화면4 : 정적버튼, bird 버튼 클릭 시 새 버튼 생성됨. 해제 버튼 클릭 시 버튼 다 적용 안 됨

=> 동적 버튼 확인

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    bind
    실행(로딩)전 document에 생성되어 있는 요소에만 이벤트 핸들러가 동작
    (*동적 요소에는 이벤트 핸들러(처리기)가 동작하지 않음) <br><br>

    <div class="wrapper">
        <input type="button" class="btn" value="정적버튼">
        <input type="button" id="clear" value="해제">

        <!-- 동적버튼이 위치할 지정 -->
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 정적 대상 방식
    let bb = $('<input type="button" class="btn" value="bird 버튼">');
    $('.wrapper').append(bb);

    for(let i=0; i<3; i++) {
        let nb = $('<input type="button" class="btn" value="동적for버튼' + i + '">');
        $('.wrapper').append(nb);

        if(i == 1) {
            // bind(event, fn)
            $('.btn').on('click', function(){ // 정적대상 방식
                $('<input>',{
                    type: 'button',
                    class: 'btn',
                    value: '새 버튼'
                }).appendTo('.wrapper');
            });
        }
    }

    $('#clear').click(function(){
        $('.btn').off('click');
    });

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

=> 동적for버튼0과 1의 경우 on인 것을 기준으로 미리 실행되기에 정적 버튼으로 취급한다.

이벤트 연결 메소드 (delegate) : 동적 대상 방식

1. 동적 버튼 추가 및 해제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    delegate(위임, 대리)
    부모의 이벤트를 물려받은 선택자에 적용되는 이벤트
    (* 부모요소는 반드시 정적대상이어야 함/ 부모를 특정하기 힘들 경우 최상단 document지정 가능)

    <div class="wrapper">
        <input type="button" class="btn" value="정적버튼">
        <input type="button" id="clear" value="해제">

        <!-- 동적버튼이 위치할 지정 -->
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // delegate(selector, event, fn) 에서 on 메소드로 변경됨
    // on(event, selector, fn)
    $('.wrapper').on('click', '.btn', function(){ // 동적대상 방식
        $('<input>',{
            type: 'button',
            class: 'btn',
            value: '새 버튼'
        }).appendTo('.wrapper');
    });

    $('#clear').on('click', function(){
        // 이벤트 부여대상의 이벤트 해제
        $('.wrapper').off('click');
    });
</script>
</body>
</html>

2. 파일 선택 영역 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="file">
        <button id="add">파일 선택 영역 추가</button>
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#add').click(function(){

        // 동적으로 생성됨
        let v_file = "<p>";
        v_file += "<input type='file'>";
        v_file += "<button class='del'>삭제</button>";
        v_file += "</p>";

        $('div').append(v_file);
    });

    // delegate방식으로 삭제버튼에 이벤트 주기
    // $(부모).on(event, selector, fn);
    $('div').on('click', '.del', function(){
        // class=del의 부모는 p이지만 동적요소이므로 부모자격이 없음
        // empty(대상요소만 지워줌와 remove(대상 요소와 자식까지 지워줌) 사용 가능
        console.log(this); // <button class='del'>삭제</button>"
        console.log( $(this).parent() ); // 부모 p 요소 포함하여 출력됨

        $(this).parent().remove();
    });

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

결과 화면7-1 : 파일 선택 영역 추가 버튼 클릭 시 하단에 추가로 늘어남

'jQuery' 카테고리의 다른 글

[jQuery] 15장 DOM 탐색 (0)	2024.02.26
[jQuery] 14장 trigger와 trigger Handler (0)	2024.02.26
[jQuery] 12장 이벤트 (0)	2024.02.23
[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드 (0)	2024.02.23
[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드 (0)	2024.02.22

jQuery

[jQuery] 12장 이벤트

2024. 2. 23. 17:15

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

1 2 3 4 5 6 7 8

[jQuery] 14장 trigger와 trigger Handler

[jQuery] 14장 trigger와 trigger Handler

[jQuery] 13장 이벤트 연결 메소드

[jQuery] 13장 이벤트 연결 메소드

[jQuery] 12장 이벤트

[jQuery] 12장 이벤트

'jQuery' 카테고리의 다른 글

'jQuery' 카테고리의 다른 글

'jQuery' 카테고리의 다른 글

티스토리툴바