jQuery

[jQuery] 14장 trigger와 trigger Handler

반응형

 

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>

 

결과 화면1 : 왼쪽 select 를 선택 시 왼쪽 내용 추가됨

 

 

 

  • 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>

 

결과 화면2 : 선택하지 않아도 선택되어 있음

 

 

 

  • 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>

 

영역 초기화를 하지 않았을 때 이와 같이 추가됨

 

결과 화면3 : 선택하지 않아도 선택되어 있음

 

 

 

사용자 정의 이벤트 : 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>

 

결과 화면4 : 더블 클릭 시 알람

 

 

 

  • 요소가 여러 개 일때 (배열 형태)
<!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>

 

결과 화면5 : 더블 클릭 시

 

 

 

  • 요소가 여러 개 일때 (객체 형태)
<!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>

 

결과 화면6-1

 

결과 화면6-2

 

 

 

  • 요소가 여러 개 일때 (문자열 형태)
<!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>

 

결과 화면7-1 : 이벤트와 이벤트 키워드는 다름

 

결과 화면7-2 : 처음 문자열 제외 전부 무시

 

 

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

 

 

 

지역 별 세부 지역 변경

 

 

<!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>

 

결과 화면8 : 변경 시 다른 것으로 변경됨

 

 

 

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>

 

결과 화면9 : 포커스 될 때 색상 변경 및 글자가 추가됨

 

 

 

  • 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>

 

결과 화면10 : trigger 버튼 클릭시 focus를 실행

 

 

 

  • 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>

 

결과 화면11 : 선택된 요소 첫번째만 실행됨

 

 

+ 번외

<!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

티스토리툴바