[Event] JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착 = 온메서드 = on메서드)

목차

1. on() 예제 - P요소 클릭 시, 경고창 띄우기
2. on() 정의
3. on() 구문
4. on() 예제 - event 매개변수에 여러 이벤트 걸기
5. on() 예제 - map 매개변수 자리에 여러 이벤트 걸기
6. on() 예제 - 사용자정의 이벤트 걸기
7. on() 예제 - 함수에 데이터 전달
8. on() 예제 - 미래 요소 위한 이벤트 핸들러 추가
9. on() 예제 - 이벤트 핸들러 제거
10. on() 예제 - 이벤트 (1개 / 여러 개) 경우 비교
11. on("click") vs. click() 메서드 차이점

on() 예제 - P요소 클릭 시, 경고창 띄우기 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").on("click", function(){

        alert("코딩 배우러 오세요.");

    });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기 

on() 정의

 

선택된 요소 및 하위 요소에 대해 하나 이상의 이벤트 메서드를 함께 실행.

 

---

 

1.

jQ 1.7부터 on() 메서드는 bind(), live(), delegate() 메서드를 대체. 

2.

on() 메서드는 API에 많은 일관성 제공하므로, jQuery 코드 단순화에 기여.

3.

on() 메서드로 연결된 이벤트 핸들러는 현재 요소와 script로 만든 미래 요소 모두에서 작동.

4.

off() 메서드 : 이벤트 핸들러 제거.

one() 메서드 : 한 번만 실행 후, 이벤트를 자체적으로 제거.

 

on() 구문

 

$(selector).on(event,childSelector,data,function,map)

 

---

[매개변수]

 

event

필수. 선택 요소에 연결할 하나 이상의 이벤트 또는 네임스페이스.

※ 각각의 이벤트는 공백으로 구분하며, 유효해야 함. (예) "mouseover mouseout"

childSelector

선택. 이벤트 핸들러가 부착돼야 할 지정 하위 요소.

※ 요소 자체가 아니라 지정된 하위 요소에만  부착.
※ 폐기된 delegate() 메서드 작동 원리와 유사.

data

선택. 함수에 전달할 추가 데이터.

function

필수. 이벤트 발생 시 실행할 함수.

map

이벤트맵. (즉, 선택 요소에 연결할 하나 이상의 이벤트와 각 이벤트 발생 시 실행할 함수 지정.) 

(예) ({event:function, event:function, ...})

 

on() 예제 - event 매개변수에 여러 이벤트 걸기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").on("mouseover mouseout", function(){

        $(this).toggleClass("hz");

    });

});

</script>

<style>

.hz {font-size: 150%;color: red;}

</style>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

on() 예제 - map 매개변수 자리에 여러 이벤트 걸기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").on({

    mouseover: function(){

      $("body").css("background-color", "LightCyan");

    },  

    mouseout: function(){

      $("body").css("background-color", "pink");

    }, 

    click: function(){

      $("body").css("background-color", "yellow");

    }  

  });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

on() 예제 - 사용자정의 이벤트 걸기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").on("hz", function(event, mb){

        $(this).text(mb + " 님, 코딩 배우러 오세요.").show();

    });

    $("button").click(function(){

        $("p").trigger("hz", ["회원"]);

    });

});

</script> 

<button>클릭</button>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

on() 예제 - 함수에 데이터 전달

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

function homzzang(event) {

  alert(event.data.msg);

}

$(document).ready(function(){

  $("p").on("click", {msg: "코딩 배우러 오세요."}, homzzang)

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

결과보기

on() 예제 - 미래 요소 위한 이벤트 핸들러 추가

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("div").on("click", "p", function(){

        $(this).slideToggle();

    });

    $("button").click(function(){

        $("<p>코딩 배우러 오세요.</p>").insertAfter("button");

    });

});

</script>

<div style="background-color:yellow">

    <p>홈짱닷컴 Homzzang.com</p>

    <p>홈페이지 제작관리 강의</p>

    <button>클릭</button>

</div> 

 

결과보기

on() 예제 - 이벤트 핸들러 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").on("click", function(){

        $(this).css("background-color", "yellow");

    });

    $("button").click(function(){

        $("p").off("click");

    });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈페이지 제작관리 강의</p>

<button>클릭</button>

 

결과보기 

on() 예제 - 이벤트 (1개 / 여러 개) 경우 비교

on("click") vs. click() 메서드 차이점

on("click") : 새로 생성되는 요소에도 적용.

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<ul id="hz">

    <li>홈짱닷컴</li> 

    <li>Homzzang.com</li> 

    <li>Since 2012</li> 

</ul> 

<script>

$('#hz').on('click', 'li', function(event) {

    $(event.target).remove();

}); 

$('#hz').append('<li>홈페이지 제작관리 매뉴얼</li>'); // 적용 O

</script>

결과보기 

---

click() : 새로 생성되는 요소에 적용 안 됨. (= 최초 로딩된 요소에만 적용)

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<ul id="hz">

    <li>홈짱닷컴</li> 

    <li>Homzzang.com</li> 

    <li>Since 2012</li> 

</ul> 

<script>

$('#hz').children().click(function () {

    $(this).remove(); 

});

$('#hz').append('<li>홈페이지 제작관리 매뉴얼</li>'); // 적용 X

</script>

결과보기