본문 바로가기
jQuery

[jQueyr] On / Off 이벤트

사악미소 2016. 1. 3. 14:01
반응형

[jQueyr] On / Off 이벤트



 eventOn.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ON 이벤트</title>
<style type="text/css">
    p {
        width:300px;
        height:50px;
        margin:0 auto;
        padding-top:25px;
        font-size:1em;
        text-align:center;
        border:1px solid black;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("p").on({
            click:function() {
                jQuery("p").css("background-color", "#FFFF00");
            },
            mouseover:function() {
                jQuery("p").css("background-color", "#87CEEB");
            },
            mouseout:function() {
                jQuery("p").css("background-color", "#FF0000");
            }
        });
    });
</script>
</head>
<body>
    <h1>이벤트 등록</h1>
    <hr/>
    <p>마우스를 클릭하거나 이동해 보세요.</p>
</body>
</html>
 출력결과01 - 기본화면

 출력결과02 - 마우스가 BOX 영역을 벗어 났을때

 출력결과02 - 마우스가 BOX 영역안으로 들어왔을때

 출력결과03 - 마우스로 BOX 영역을 클릭했을때




 eventOff.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>OFF 이벤트</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
       
        jQuery("#btnOn").click(function() {

            alert("클릭 이벤트가 등록 되었습니다.");

            jQuery("#btn").on("click", function() {
                alert("안녕하세요.");
            });
        });
       
        jQuery("#btnOff").click(function() {

            alert("클릭 이벤트가 제거 되었습니다.");


            jQuery("#btn").off("click");
        });
    });
</script>
</head>
<body>
    <h1>이벤트 제거</h1>
    <hr>
    <button type="button" id="btnOn">이벤트 등록</button>
    <button type="button" id="btnOff">이벤트 제거</button>
    <button type="button" id="btn">클릭해 보세요</button>
</body>
</html>

 출력결과01 - '이벤트 등록' 버튼을 클릭한 경우

 출력결과02 - '클릭해 보세요' 버튼을 클릭한 경우

 출력결과03 - '이벤트 제거' 버튼을 클릭한 경우


※ jQuery는 내부에 있는 함수도 호출 할 수 있다.








반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] 움직이는 이미지  (0) 2016.01.03
[jQuery] 무한 스크롤 이벤트  (0) 2016.01.03
[jQuery] input 이벤트  (0) 2015.12.29
[jQuery] checkbox 이벤트  (1) 2015.12.29
[jQuery] jQuery 엘리먼트  (0) 2015.12.28

'jQuery' Related Articles

티스토리툴바