• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

분류 제목
Effect JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과…
Effect JQ - stop() 메서드 ★ - 멈추게 하기 (= 슬라이드/애니 중단 = 움직임 멈추기/멈춤 = stop…
Effect JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수
Effect JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)
HTML_CSS JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내… 2
HTML_CSS JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용…
HTML_CSS JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠…
HTML_CSS JQ - addClass() , removeClass() , toggleClass() , css() 메서드 …
HTML_CSS JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기
HTML_CSS JQ - width() , height() , innerWidth() , innerHeight() , out…
Traversing JQ - Traversing - 특정요소찾기 (= 특정요소선택 = 트래버싱)
Traversing JQ - parent() , parents() , parentsUntil() 메서드 - 부모요소찾기 (= 부…
Traversing JQ - children() 메서드 - 자식요소찾기 / find() 메서드 - 자손요소찾기
Traversing JQ - 형제찾기 메서드 - siblings() , next() , nextAll() , nextUntil(…
Traversing JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() …
AJAX JQ - AJAX (아작스) 소개 - 정의 / 기본예제 / 메서드종류
AJAX JQ - load() 메서드 ★ - 파일 내용 가져오기 (= load메서드 = 아작스 로드메서드)
AJAX JQ - get()/post() 메서드 - 서버에 정보요청 (= get메서드 = 겟메서드 / post메서드 …
Misc JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충…
Examples jQuery Examples - 제이쿼리 예제 복습
2/15
목록
찾아주셔서 감사합니다. Since 2012