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>
<!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>
</body>
</html>
</pre>
</body>
</html>
바로 위 스크립트 소스를 변경하여,bind() 메서드 파라미터에 eventData를 대신에 각각의 이벤트에 관련 함수를 연결하여 해당 이벤트를 구분 하고 있습니다. 마찬가지로 동일한 동작을 수행하는 것을 확인할 수 있습니다.
이벤트를 제어하기 위해서 꼭 알아야 하는 메서드이니 기억해 두시면 좋을거 같습니다.
'IT > jquery' 카테고리의 다른 글
| jQuery를 이용한 HTML DOM 접근 방법 - 기본 셀렉터 (2) | 2016.01.25 |
|---|---|
| jquery event - 이벤트를 동적으로 맴핑하기 (0) | 2013.01.02 |
| jquery 이벤트 지원 메서드 정리 (0) | 2012.12.21 |
| jQuery Form 관련 메서드 정리 (0) | 2012.12.17 |
| jQuery element(요소)의 속성 관련 메서드 정리 (0) | 2012.12.13 |
