bind( eventType, data, handler)
<style>
html * { margin:0; padding:0; }
#box { width:200px; height:200px; border:2px solid blue; margin-left:300px; margin-top:200px; background-color:blue;}
#box.mouseover { background-color: red; }
#box.mouseout { background-color: green; }
#box.mousedown { background-color: purple; }
#box.mouseup { background-color: #FF9C00; }
#box > p { padding:30px; color:white; }
</style>
<script>
$(document).ready(function(){
var box = $('#box');
box.bind({
mouseover:function(){
var target = $(this); // this = <div id="box">
target.removeClass().addClass('mouseover'); // 가지고있던 이벤트를 지우고 mouseover이벤트를 추가해 줍니다.
target.find('> p').text('mouseover 이벤트 발생'); // $('#box > p ') 에 mouseover 이벤트 발생 글자를 써줍니다.
},
mouseout:function(){
var target = $(this); // this = <div id="box">
target.removeClass().addClass('mouseout');
target.find('> p').text('mouseout 이벤트 발생');
},
mousedown:function(){
var target = $(this); // this = <div id="box">
target.removeClass().addClass('mousedown');
target.find('> p').text('mousedown 이벤트 발생');
},
mouseup:function(){
var target = $(this); // this = <div id="box">
target.removeClass().addClass('mouseup');
target.find('> p').text('mouseup 이벤트 발생');
}
});
});
</script>
</head>
<body>
<div id="box">
<p>현재 진행되는 이벤트 타입.</p>
</div>
</body>
unbind( eventType, handler)
<style>
html * { margin:0; padding:0; }
#box { width:200px; height:200px; border:2px solid blue;
margin-left:300px; margin-top:200px; background-color:blue;}
#box.mouseover { background-color: red; }
#box.mouseout { background-color: green; }
#box.mousedown { background-color: purple; }
#box.mouseup { background-color: #FF9C00; }
#box > p { padding:30px; color:white; }
</style>
<script>
$(document).ready(function(){
var box = $('#box');
box.bind({
mouseover:function(){
var tg = $(this); // this = <div id="box">
tg.removeClass().addClass('mouseover');
tg.find('> p').text('mouseover');
},
mouseout:function(){
var tg = $(this);
tg.removeClass().addClass('mouseout');
tg.find('> p').text('mouseout');
},
mousedown:function(){
var tg = $(this);
tg.removeClass().addClass('mousedown');
tg.find('> p').text('mousedown');
},
mouseup:function(){
var tg = $(this);
tg.removeClass().addClass('mouseup');
tg.find('> p').text('mouseup');
}
});
var btn1 = $('#btn1');
var btn2 = $('#btn2');
btn1.bind('click', function(){ // btn1을 누르면 mouse out 이벤트 unbind
box.unbind('mouseout');
});
btn2.bind('click', function(){ // btn2을 누르면 모든 이벤트를 한번에 제거함
box.unbind();
});
});
</script>
</head>
<body>
<input id="btn1" type="button" value="mouseout 이벤트 제거" />
<input id="btn2" type="button" value="모든 이벤트 제거" />
<div id="box" class="out">
<p>mouseout</p>
</div>
</body>