유블로그

[jQuery] 다양한 이벤트 처리 방식 본문

JavaScript & jQuery

[jQuery] 다양한 이벤트 처리 방식

yujeong kang 2020. 9. 12. 12:32

방법 1 : .on(이벤트종류, 수행할 함수)

<body>
    <h2>jQuery 이벤트 방식</h2>
    <script>
        $("h2").on("click", function() {
            console.log($(this).text());
        })
    </script>
</body>

이 방법으로 할 경우 추가로 만들어지는 element( 위 예시에서는 h2) 에 대해 이벤트 처리를 할 수 없다.

(기존에 원래 있던 h2에만 이벤트 처리)

 

방법 2 : $(element).on(이벤트종류, 추가될element, 수행할 함수)

<body>
    <button id="btn2">추가하기</button>
    <div id="list">
        <h2>!!클릭!!</h2>
    </div>

    <script>
        // id가 list인 element에 새로 추가 되는 h2 까지 모두 이벤트 처리
        $("#list").on("click", "h2", function() {
            console.log($(this).text());
        });

        $("#btn2").click(function() {
            console.log("추가하기 버튼 클릭됨");
            // id 가 list인 div에 h2 엘리먼트를 추가
            $("#list").append("<h2>안녕</h2>");
        });
    </script>
</body>

방법1과 다르게 btn2를 눌러서 id가 list인 div 에 새로 추가 되는 h2까지 이벤트 처리가 된다.

저작자표시 비영리 변경금지

'JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 시간함수  (0) 2020.09.13
[JavaScript & jQuery] this : 순수자바스크립트 객체와 jQuery 객체 변형  (0) 2020.09.12
[JavaScript] 다양한 이벤트 처리 방식  (0) 2020.09.12
[JavaScript] 이벤트 종류  (0) 2020.09.12
[JavaScript] .innerHTML 로 내용 확인하고 변경하기  (0) 2020.09.12
'JavaScript & jQuery' Related Articles more