220518 jQuery2

1. jQuery Event

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(Event Handler) 함수를 작성해야만 한다.

이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩(Event Binding)이라고 한다.

jQuery는 이 이벤트 바인딩을 위한 다양한 방법을 제공한다.

 

 

 

1-1. .on() 메소드

• 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
• 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.
• 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.
• 사용자 지정 이벤트(Custom Event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
• 차후에 다루게 될 요소를 이벤트에 바인딩 할 수 있다.

 

[예제 코드]

<!-- 기본형 -->
<h1>click event</h1>
<p>여기를 클릭해 주세요</p>
<script>
$('p').on("click", function(){
    alert("문장이 클릭되었습니다.");
});
</script>

<!-- 이벤트 핸들러 하나에 이벤트를 여러개 설정 -->
<h1>마우스 이벤트</h1>
<p>이 문장 위로 마우스를 움직여 보세요</p>
<div></div>
<script>
    $('p').on('mouseenter mouseleave', function(){
        $('div').append('마우스 커서가 문장 위로 들어오거나 빠져나갔습니다.<br>');
    });
</script>

<!-- 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 바인딩 -->
<h1>마우스 이벤트</h1>
<p>이 문장 위로 마우스를 움직여 보세요</p>
<div></div>
<script>
    $('p').on({
        click:function(){
            $('div').append('마우스가 문장을 클릭했습니다.<br>');
        },
        mouseenter:function(){
            $('div').append("마우스가 문장 위로 돌아왔습니다.<br>");
        },
        mouseleave:function(){
            $('div').append("마우스가 문장을 빠져 나갔습니다.<br>");
        }
    });
</script>

 

[출력 결과]

 

 

 

1-2. .off() 메소드

.off() 메소드는 더 이상 사용하지 않는 이벤트와의 바인딩을 제거한다.

 

[예제 코드]

<h1>off()이벤트</h1>
<button id="btn">버튼 클릭 가능</button>
<button id="btnBind">버튼 클릭을 가능하게 한다.</button>
<button id="btnUnbind">버튼 클릭을 불가능하게 한다.</button>
<div></div>
<script>
   function action(){
       $('div').append("버튼 이벤트 발생!!<br>");
   }

   $("#btn").on("click",function(){
       action();
   });

   $("#btnUnbind").on("click", function(){
// 	 		$("#btn").off("click");
// 	 		$("#btn").text("버튼 클릭 불가능");

       //chain기법
       $("#btn").off("click").text("버튼 클릭 불가능");
   });

   $('#btnBind').on("click", function(){
       $("#btn").on("click",function(){
           action();
       }).text("버튼 클릭 가능");
   });
</script>

▶ Chain 기법(체인 기법 또는 체이닝 기법) : 선택한 대상에 대해서 연속적으로 제어하는 것

▶ 코드가 간결해진다는 장점이 있지만, 너무 복잡한 chain은 코드의 가독성을 떨어뜨릴 수 있다.

 

[출력 결과]

 

 

 

1-3. .one() 메소드

.one() 메소드는 바인딩된 이벤트 핸들러가 한 번만 실행되고 나서 더는 실행되지 않는다.

.on() 메소드와 같은 인수를 전달받는다. 따라서 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 가질 수 있는 등, .on() 메소드와 같은 특징을 갖는다. 

 

[예제 코드]

<h1>one()</h1>
<p>아래 버튼은 한 번만 실행됩니다.</p>
<button>버튼을 클릭해 주세요</button>
<div></div>
<script type="text/javascript">
$("button").one("click", function(){
    $("div").append("이제 클릭이 되지 않습니다.<br>");
})
</script>

 

[출력 결과]

 

 

 

1-4. .click(), .dbclick()

[예제 코드]

<h1>jQuery click(), dblclick()</h1>
<button>버튼</button>을 클릭 or 더블클릭 하세요
<p id="text"></p>
<script>
    $("button").click(function(){
        $("#text").text("클릭이 되었습니다.");
    });
    $("button").dblclick(function(){
        $("#text").text("더블 클릭이 되었습니다.");
    });
</script>

 

[출력 결과]

 

 

 

1-5. keypress(), keydown()

Shift, Esc, Delete 키와 같이 화면에 출력되지 않는 키들은, "keydown" 이벤트는 발생시키지만, "keypress" 이벤트는 발생시키지 않는다.

 

[예제 코드]

<input type="text"> 입력 란에 키보드로 내용을 입력하세요.
<h1>jQuery .keypress()</h1>
<p id="text"></p>
<h1>jQuery .keydown()</h1>
<p id="text2"></p>
<script>
    let i = 0;
    $("input").keypress(function(){
        $("#text").text((++i) + "번 키보드가 눌렸습니다.");
    });
    let j = 0;
    $("input").keydown(function(){
        $("#text2").text((++j) + "번 키보드가 눌렸습니다.");
    });
</script>

 

[출력 결과]

 

 

 

1-6. effect 효과

• .show() : 선택한 요소를 나타나게 한다.
• .hide() : 선택한 요소를 사라지게 한다.

 

[예제 코드]

<h1>hide(), show() 메소드</h1>
<p>
<button id="btnHide">문장 숨기기</button>
<button id="btnShow">문장 표시하기</button>
</p>
<div>안녕하세요, jQuery입니다.</div>
<script>
    $("#btnHide").on("click", function(){
        $("div").hide(1000);
    });
    $("#btnShow").on("click", function(){
        $("div").show();
    });
</script>

▶ .hide() 메소드의 괄호 안에는 slow, fast, 숫자를 넣을 수 있다. 숫자의 단위는 1000분의 1초

 

[출력 결과]