본문 바로가기

IT/jquery

jquery 이벤트 메서드 중요메서드 정리

jquery 이벤트 메서드들 중에서 가장 중요한 메서드인 bind() 메서드를 정리해보았습니다. 


.bind()




이 메서드는 단어로 이해를 하면 묶어준다는 뜻입니다.  개체와 이벤트를 묶어주는(연결해주는) 역할을 합니다.


다른 event 관련 메서드는 직접 호출하지만, bind()의 경우 파라미터의 값으로 이벤트 이름을  대입하여 해당 이벤트를 체크합니다.


$("span").click(function() { alert('click'); }); 


event 메서드는 이렇게 사용했다면, bind() 메서드를 통해서는 다음과 같이 표현됩니다.


$("span").bind('click', function() { alert('bind click');});


두 메서드의 차이점은 .click() 메서드는 직접 호출을 하는 것이 아니고, bind() 메서드는 click() 메서드의 이름을 파라미터로 넘겨 동일한 효과를 얻는 것입니다.


이런 기능을 통해 조건에 따라 간단한 이벤트를 동적으로 할당 할 수 있습니다. 또한, 여러가지의 이벤트를 쉽게 선택한 개체(요소)에 적용할 수 있습니다. 두 개의 이벤트를 적용한 아래의 예제를 통하여 bind() 메서드에 대해 자세하게 알아보겠습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

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

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var count = 0;


$("p").bind("mouseenter mouseleave", function(event){

   count++;

  $("span").text(count + " enter or leave");

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

});


</script>


</body>

</html>






mouseenter, mouseleave 이벤트를 이용하였습니다.  마우스를 움직이면 카운터가 올라가는 것을 확인할 수 있습니다. 두개의 이벤트를 지정 시에도 문제없이 동작하는 것을 확인 할 수 있습니다.


.bind() 메서드의 파라미터와 eventData를 사용하여 각각의 이벤트를 어떻게 확인하는지 확인해보겠습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

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

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var countEnter = 0;

var countLeave = 0;


$("p").bind("mouseenter mouseleave", function(e){

  if(e.type == 'mouseenter') {

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  } 

  else {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});

</script>

</body>

</html>








각각의 이벤트에 따라 값이 변하는 걸 볼 수 있습니다.


<!DOCTYPE html>

<html>

<head>

  <style>

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

</style>

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

</head>

<body>

  <p>Click or double click here.</p>

<span></span>

<script>

var countEnter = 0;

var countLeave = 0;


$("p").bind({

  mouseenter : function(){

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  }, 

  mouseleave : function() {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});


</script>

<pre>

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

  &lt;style&gt;

p { background:yellow; font-weight:bold; cursor:pointer; 

padding:5px; }

p.over { background: #ccc; }

span { color:red; }

&lt;/style&gt;

  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;p&gt;Click or double click here.&lt;/p&gt;

&lt;span&gt;&lt;/span&gt;

&lt;script&gt;

var countEnter = 0;

var countLeave = 0;


$("p").bind({

  mouseenter : function(){

    countEnter++;

    $("span").text(countEnter + " Mouse enter");

  }, 

  mouseleave : function() {

     countLeave++;

     $("span").text(countLeave + " Mose Leave");

  }

});

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

</body>

</html>






바로 위 스크립트 소스를 변경하여,bind() 메서드 파라미터에 eventData를 대신에 각각의 이벤트에 관련 함수를 연결하여 해당 이벤트를 구분 하고 있습니다. 마찬가지로 동일한 동작을 수행하는 것을 확인할 수 있습니다.


이벤트를 제어하기 위해서 꼭 알아야 하는 메서드이니 기억해 두시면 좋을거 같습니다.