<body>
<h1>이벤트</h1>
<button onclick="test1(event);">실행확인</button>
<script>
function test1(event){
//이벤트 내장객체(javascript)
console.log('이벤트');
}
</script>
<h3>이벤트 연결 함수</h3>
<p>
bind()/on() : 현재 존재하는 요소를 이벤트와 연결하는 함수 <br>
unbind() / off() : 현재 연결된 이벤트를 요소로 부터 제거하는 함수 <br>
jQurey 3버전 부터 on/off함수로 대체 되었다.
</p>
<div id="test1">마우스<br>이벤트</div>
<script>
//bind/unbind
/* $(function(){
$('#test1').bind('mouseenter',function(){
$(this).css({
background : 'orange'
});
}).bind('mouseleave',function(){
$(this).css({
background:'white'
});
});
$('#test1').bind('click',function(){
$(this).unbind('mouseenter').unbind('mouseleave');
});
});
*/
//on()/off()
$('#test1').on({
'mouseenter':function(){
$(this).css('background','yellow').text('마우스 올라감');
},
'mouseleave':function(){
$(this).css('background','green').text('마우스 떠남');
},
'click':function(){
$(this).off('mouseenter').off('mouseleave');
}
});
</script>
<hr>
<h3>one() : 일회성 함수</h3>
<button id="testOne">실행 확인</button>
<script>
$('#testOne').one('click',function(){
alert('실행 확인하였습니다.');
});
</script>
'JQUERY > 함수' 카테고리의 다른 글
| hover() (0) | 2022.08.28 |
|---|---|
| 이벤트..mouseout. mouseover (0) | 2022.08.28 |
| 요소 복사,삭제태그들....clone(),remove() (0) | 2022.08.28 |
| 요소추가. append, prepend, before, after (0) | 2022.08.28 |
| 요소추가. append, prepend, before, after (0) | 2022.08.28 |