1. 어느 버튼을 클릭했는지 확인하기
bind ( eventType, data, handler )
- evnetType : 이벤트 타입지정 문자열, click, double-click, focus, blur
- data : 이벤트 핸들러에 전달할 데이터. 생략하면 두번째 변수는 핸들러 함수가 됨.
- handler : 이벤트 발생시 수행할 문장을 가진 함수.
$('.bold').bind('click', function (){
>> 클래스 이름이 bold 인 span 엘리먼트에 대한 클릭 이벤트 핸들러
.click ( handler ) // .click() >> 클릭 이벤트 핸들러
.dblclick ( handler ) // .dblclick() >> 더블클릭 이벤트 핸들러
# 이벤트 객체의 target 속성을 사용해 Eliment의 target 을 알아내어 변수 $target에 저장
>> 조건문으로 $target 변수에 저장된 엘리먼트가 Bold 인지 Italic 인지 확인
2. 자동으로 이벤트 발생 시키기
<body>
<span class="bold buttons">Bold</span>
<span class="italic buttons">Italic</span>
</body>
>> bold, italic 클래스는 JQuery 를 적용하는데 사용 // buttons 클래스는 CSS 클래스 적용시 사용
trigger ( eventType ) >> evnetType : 이벤트 타입지정 (click, double-click, focus 등..)
----------------------------------------------------------------------------------------
* 엘리먼트에 trigger() 메소드를 사용하기전에 이벤트 핸들러가 정의되어야 함.
$('.buttons').bind('click', function(){
alert('You have clicked the ' + $(this).text() + ' button');
});
$('.italic').trigger('click');
>> click 이벤트가 클래스 이름이 buttons인 엘리먼트, 즉 Bold & Italic 버튼에 연결(Bind) 되어 있음.
이벤트 핸들러는 인라인 함수로 정의, Italic 버튼에 클릭 이벤트 구동 해당 이벤트핸들러를 실행시킴.
----------------------------------------------------------------------------------------
3. 버튼을 한번 누른후 비활성으로 변경
$('.buttons').bind('click', function(){
alert('You have clicked the ' + $(this).text() + ' button');
$('.buttons').unbind('click');
});
unbind( eventType, handler ) // unbind( eventType) // unbind( )
- evnetType : 이벤트 타입지정 (click, double-click, focus 등..) / 지정한 eventType 에 연결되어 있는 모든 이벤트 핸들러는 실행되지 않음.
- handler는 제거할 이벤트 핸들러 >> bind()에 전달한것과 같아야 함.
- 파라미터라 없으면 모든 이벤트가 제거됨
4. 마우스 이벤트 처리
- $('.buttons').bind('mousedown', function(){ >> 마우스 Down
- $('.buttons').mouseup(function(){ >> 마우스 Up
- $('.buttons').mouseover(function(){ >> 마우스 Over
- $('.buttons').mouseout(function(){ >> 마우스 Out
5. 어느 마우스를 눌렀는지 확인
$('.buttons').mousedown( function(event){
if(event.button == 1){ // 왼쪽 마우스 button 속성값 1
$('p').text('Left mouse button is pressed');
}else{ // 오른쪽 마우스 button 속성값 2
$('p').text('Rightt mouse button is pressed');
}
});
6. 마우스 버튼 누른곳 화면위치 알아내기
$('img').mousedown( function(event){
$('p').text('Mouse is Clicked at horizontal coordinate : ' + event.screenX + ' and at vertical coordinate : ' + event.screenY);
});
- screenX : 화면 원점에서 이벤트가 일어난 곳의 상대적 수평위치
- screenY : 화면 원점에서 이벤트가 일어난 곳의 상대적 수직위치
7. 동적으로 텍스트 하이라이트 처리
$('.buttons').mouseover( function(){
$('p').css({
'backgroud-color':'cyan',
'font-weight':'bold',
'color':'blue',
});
});
# Img Eliment 높이에 30을 더한값을 반환하는 함수 > img Eliment height 를 30 pixel 늘림.
$('img').css('height', function(){ return $(this).height() + 30;});
8. 마우스를 움직여 이미지 밝게/ 흐리게 처리
$('img').css('opacity', 0.4);
$('.buttons').bind('mouseover', function(){
$('img').css('opacity', 1.0);
});
$('.buttons').bind('mouseout', function(){
$('img').css('opacity', 0.4);
});
$('.buttons').bind('mousedown', function(){
$('img').css('width', function(){ return $(this).width() + 50;});
$('img').css('height', function(){ return $(this).height() + 30;});
});
- opacity CSS 속성 값 : 0 (투명) ~ 1 (불투명) / 0% ~ 100%
9. 엘리먼트 포커스 얻고, 잃는 시점 알기
$('.name').focus( function(event){
alert('The focus Currently is On Name Field');
});
$('.name').blur( function(event){
alert('The focus is Lost from Name Field');
});
10. 버튼에 호버 효과
hover( handler1, handler2 )
- handler1 : 마우스가 지정한 엘리먼트에 들어올때 실행하는 코드를 포함하는 함수.
- handler2 : 마우스가 지정한 엘리먼트를 벗어날 때 실행하는 코드를 포함하는 함수.
$('.buttons').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
# hover 이벤트는 mouseenter 이벤트 와 mouseleave 이벤트를 한꺼번에 정의함.
$(selector).hover(handlerIn, handlerOut) 은 $(selector).mouseenter(handlerIn).mouseleave(handlerOut) 의 축약형
11. CSS 클래스의 적용 토글
.toggleClass( class )
- 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 클래스 제거.
- class는 선택한 엘리먼트에 적용하거나 제거할 클래스임.
$('.buttons').click(function(){
$(this).toggleClass('hover');
});
.toggle( handler1, handler2 )
- 선택한 엘리먼트에 두개의 이벤트 핸들러 연결
- handler1 : 0 부터 시작한다고 할경우 이벤트가 짝수번째로 발생한경우에 실행.
- handler2 : 이벤트가 홀수번째로 발생한경우에 실행.
- 이벤트 발생시마다 이벤트 핸들러 함수가 순환됨
$('.buttons').toggle(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
Good Site : http://superkts.com/jquery/toggle
'# JQuery' 카테고리의 다른 글
| 폼 유효성을 확인하는 방법 (0) | 2015.08.29 |
|---|---|
| 이벤트 처리 2 (0) | 2015.08.23 |
| 배열 관련 (0) | 2015.08.20 |
| JQuery....... Start (0) | 2010.11.16 |
