• 회원가입
  • 로그인

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

 

결과보기

PS. mouseover, mouseout 둘 다 걸어줘야 hover처럼 작동.
 

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>

 

결과보기 

 
 
PS. 추가 예제들.
 

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

[이벤트 1개 경우]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on("click",function(){ // p요소 클릭하면
        $(this).hide(); // p요소 사라져라. 뿅 !!
    });
});
</script>

<p>클릭하면 사라져라! 얏!</p>
<p>홈짱닷컴 Homzzang.com</p>
<p>HTML CSS JAVASCRIPT JQUERY SQL PHP</p>


[이벤트 여러 개 경우]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").on({   // div요소에 대해 여러 이벤트를 쉼표 ( , ) 이용해 걸거야.
        mouseenter: function(){  // 마우스 커서가 선택된 요소 안으로 들어오면
            $(this).css("background-color", "#ffd3d3");  // 이 요소의 배경색을 #ffd3d3 으로 바꿔버려.
        },
        mouseleave: function(){  // 마우스 커서가 선택된 요소 밖으로 나가려하면
            $(this).css("background-color", "#fd83bd");  // 이 요소의 배경색을 #fd83bd 으로 바꿔버려.
        },
        click: function(){  // 선택된 div 요소를 클릭하면
            $(this).css("background-color", "yellow");  // 이 요소의 배경색을 yellow로 바꿔버려.
        }
    });
});
</script>

<style>
div {width:300px; height:100px; line-height:100px; text-align:center; border:1px solid silver;}
</style>

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

결과보기
PS. 구문 차이

[이벤트 1개]

 

$(selector).on("event", function() {
    실행할 함수 내용;
});

 


[이벤트 여러 개]

 

$(selector).on({
    event1: function() {

        실행할 함수 내용;
    },
    
event2: function() {
        실행할 함수 내용;
    },
    event3: function() {
        실행할 함수 내용;
    }

});

 

※ 마지막 이벤트 끝엔 쉼표 찍으면 안 됨.

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>


결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012