'분류 전체보기'에 해당되는 글 159건
- 2010.11.30 [iPhone] Tab Bars and Navigation Controllers in Interface Builder
- 2010.11.29 [iPhone] Building an iPhone App Combining Tab Bar, Navigation and Tab
- 2010.11.12 [iPhone] NavigationView 기초 동영상
- 2010.10.24 [SQL Server] Transaction Lock & Kill
- 2010.10.13 [IIS] 컴포넌트 버전업시 교체 문제점과 해결 방법
- 2010.09.14 [javascript] Client Side File Size 확인 1
- 2010.08.11 [ASP.NET] JSON JavaScriptSerializer 오류
- 2010.08.05 [WPF] 레이아웃
- 2010.07.22 [C#] WCF RESTFul (JSON & XML)
- 2010.07.22 [jquery] Events (이벤트)
2010. 11. 30. 17:11
2010. 11. 29. 21:22
2010. 11. 12. 14:25
2010. 10. 24. 20:05
서버에 락이 발생하면 특정 업무처리가 마비되어버린다.
(관련된 테이블이 락이 걸리면 말이다..)
이에 따라 LOCK이 걸린 요청 프로세스를 찾아 종료를 해주어야
LOCK이 해제가 되면서 다시 원활한 작업이 가능하다.
sp_lock 명령어를 통해 LOCK이 걸린 결과를 확인할 수 있으며
결과중 LOCK이 걸린 spid 를 종료해주어야 한다.
종료해주는 KILL 명령어를 사용하여 LOCK을 해제해준다.
>> KILL spid값 (실행)
2010. 10. 13. 11:59
웹사이트를 개발하다보면
html과 script, 서버코드 뿐만 아니라 컴포넌트(COM, COM+ 등)를 이용한다.
이런 컴포넌트는 개발의 편리함을 제공해주지만 기능 추가나 버그 등으로 버전업 할 경우가 있다.
만약 운영중에 컴포넌트가 버전업되어 기존 컴포넌트를 삭제하고 새 컴포넌트를 설치해야하는데..
기존에 설치되어있는 컴포넌트의 삭제 명령어(REGSVR32 -U 등)로 삭제가 가능하다.
하지만 여기서 문제가 발생한다.
설치된 컴포넌트 삭제는 되지만 실제 IIS 프로세스가 메모리상에서 기존 컴포넌트를 사용하고 있는 상태라
기존 컴포넌트의 파일 삭제 및 파일명 변경이 되지 않는 것이다.
-----------------------------------------------------------------------------------------------
이럴 경우 어떻게 기존 컴포넌트 파일에서 새 컴포넌트 파일로 교체를 하는가?
첫번째.
기존 컴포넌트 삭제 > 리부팅 > 새 컴포넌트 설치
두번째.
기존 컴포넌트 삭제 > 서비스에서 'IIS Admin'을 재시작 > 새 컴포넌트 설치
-----------------------------------------------------------------------------------------------
서버가 이중화 되어있지 않다면 어쩔수 없이 발생하는 문제가 있다.
두가지 방법 모두 IIS가 중지되기 때문에 리부팅 또는 IIS Admin 서비스가 재시작 되는 동안
유저들에게 웹서비스를 제공하지 못한다. 이것은 어쩔 수 없이 감수할 수 밖에 없는 듯 하다.
그나마 리부팅 보다는 IIS Admin 서비스의 재시작이 적은 시간이 소요 되므로
두번째 방법으로 최대한 오류시간을 줄일 수 있을 것 같다.
ps.잘못된 지식이거나 보다 나은 정보가 있다면 댓글 부탁드립니다.
2010. 9. 14. 18:55
크로스브라우징 파일사이즈 체크 (IE, FF, 사파리, 크롬 사용가능)
function filesize() {
var size = 0;
var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
{
var oas = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('file').value;
var e = oas.getFile(filepath);
size = e.size;
}
else
{
var node = document.getElementById('file');
size = node.files[0].fileSize;
}
alert(size);
}
2010. 8. 11. 15:29
아래와 같은 오류가 발생하면 Web.Config에서 설정값 변경작업을 해야한다.
[원인]
자바스크립트로 웹서비스의 WebMethod 호출시 아래와 같은 오류가 발생
이런 형태로 리턴값을 받을때 JSON형태로 리턴을 한다.(Fiddler로 확인 가능)
[오류내용]
- 한글
JSON JavaScriptSerializer를 사용하여 serialize 또는 deserialize하는 동안 오류가 발생했습니다. 문자열의 길이가 maxJsonLength 속성에 설정된 값을 초과합니다.
- 영문
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
...
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="500000" />
</webServices>
</scripting>
</system.web.extensions>
...
</configuration>
<configuration>
...
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="500000" />
</webServices>
</scripting>
</system.web.extensions>
...
</configuration>
2010. 8. 5. 18:17
1. StackPanel
- 자식요소가 수평으로(좌에서 우)으로 쌓이거나 위에서 아래로 쌓이게 하는 패널
- 주요 프로퍼티
[결합속성]
Orientation
- Vertical : 수직모드
- Horizontal : 수평모드
Orientation
- Vertical : 수직모드
- Horizontal : 수평모드
2. Canvas
- Canvas의 offset 값(Top, Left, Right, Bottom 속성값)에 따라 자식요소를 위치를 지정하는 패널
- 주요 프로퍼티
[결합속성]
Canvas.Top="90"
- 자식요소가 Canvas의 상단(Top)으로부터 얼마나 떨어질 것인지 설정
Canvas.Left="90"
- 자식요소가 Canvas의 왼쪽(Left)으로부터 얼마나 떨어질 것인지 설정
Canvas.Right="90"
- 자식요소가 Canvas의 오른쪽(Right)으로부터 얼마나 떨어질 것인지 설정
Canvas.Bottom="90"
- 자식요소가 Canvas의 하단(Bottom)으로부터 얼마나 떨어질 것인지 설정
Canvas.Top="90"
- 자식요소가 Canvas의 상단(Top)으로부터 얼마나 떨어질 것인지 설정
Canvas.Left="90"
- 자식요소가 Canvas의 왼쪽(Left)으로부터 얼마나 떨어질 것인지 설정
Canvas.Right="90"
- 자식요소가 Canvas의 오른쪽(Right)으로부터 얼마나 떨어질 것인지 설정
Canvas.Bottom="90"
- 자식요소가 Canvas의 하단(Bottom)으로부터 얼마나 떨어질 것인지 설정
- Top, Left, Right, Bottom는 결합(Attach)속성로 자식요소에서 Canvas.Top="10" 형태로 설정한다.
- 자식요소에 좌표를 지정하면 설정한 위치에 고정된다.
3. DockPanel
- 자식요소의 DockPanel.Dock 결합속성값 설정에 따라서 위치가 결정
- 주요 프로퍼티
[의존속성]
LastChildFill
- 마지막 자식요소가 나머지 영역을 채우도록 설정한다. (true/false)
[결합속성]
DockPanel.Dock="Top"
- 자식요소가 DockPanel의 상단으로 붙인다.
DockPanel.Dock="Left"
- 자식요소가 DockPanel의 좌측으로 붙인다.
DockPanel.Dock="Right"
- 자식요소가 DockPanel의 우측으로 붙인다.
DockPanel.Dock="Bottom"
- 자식요소가 DockPanel의 바닥으로 붙인다.
LastChildFill
- 마지막 자식요소가 나머지 영역을 채우도록 설정한다. (true/false)
[결합속성]
DockPanel.Dock="Top"
- 자식요소가 DockPanel의 상단으로 붙인다.
DockPanel.Dock="Left"
- 자식요소가 DockPanel의 좌측으로 붙인다.
DockPanel.Dock="Right"
- 자식요소가 DockPanel의 우측으로 붙인다.
DockPanel.Dock="Bottom"
- 자식요소가 DockPanel의 바닥으로 붙인다.
- DockPanel.Dock 설정을 하지 않은 자식요소는 DockPanel의 Content 영역, 즉 가운데에 붙인다.
4. Grid
5. UniformGrid
6. ViewBox
2010. 7. 22. 10:25
WCF 서비스를 REST 방식으로 웹 서비스를 이용하고자 샘플을 만들어 보았으며
아래 샘플소스는 WCF + ASP.NET + jQuery 를 사용하였다.
WCFJsonNXmlTest.zip
간단히 HttpModule을 이용하여 URL Rewrite처리를 하여 .svc 의 URL을 주소에서 감추고자 하였다.
(IIS7은 URL Rewrite를 IIS에서 제공해주므로 구현 안하고 설정으로 사용 가능 할듯)
(IIS6은 HttpModule방식과 정규식과 web.config와 같은 설정파일에서 관리)
[실제URL]
참고 URL
1.
[Programming JSON with WCF in .NET Framework 3.5]
2.
[Rob Windsor on WCF with REST, JSON and RSS]
3.
[WCF and JQuery Using JSON]
4.
[Consuming JSON data in .NET with WCF]
5.
[클라이언트 페이지 json요청]
[서버 WCF 서비스 json요청 처리]
6.WCF REST 방식에서 .SVC를 제거하는 방법
2010. 7. 22. 01:17
[Browser Events]
■ .error()
선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생하는 오류 이벤트
- .bind('error', handler) 의 축약형
.error( handler(eventObject) ) version 1.0
(예)
1) <img src="missing.png" alt="Book" id="book" />
2) $('#book').error(function() { alert('Handler for .error() called.') }); // 이미지가 로드되지 않을 경우 오류 이벤트 발생
■ .resize()
browser window의 사이즈가 변경될때 발생하는 이벤트
- .bind('resize', handler) 의 축약형
- .trigger('resize') 를 통하여 이벤트를 발생시킬 수 있다.
.resize( handler(eventObject) ) version 1.0
(예) $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); });
.resize() version 1.0
■ .scroll()
선택한 Element의 스크롤바가 움직일 경우 발생하는 이벤트
- .bind('scroll', handler) 의 축약형
- .trigger('scroll') 를 통하여 이벤트를 발생시킬 수 있다.
.scroll( handler(eventObject) ) version 1.0
(예) $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); });
[Document Loading]
■ .load()
선택된 Element(URL : images, scripts, frames, iframes, 그리고 window object 등) 가 로드(load)가 완료되었을 때 발생하는 이벤트
- .bind('load', handler) 의 축약형
- "load" JavaScript event
.load( handler(eventObject) ) version 1.0
(예)
1) <img src="book.png" alt="Book" id="book" />
2) $('#book').load(function() { // Handler for .load() called. }); // 정상적으로 #book의 이미지가 로드되면 이벤트 발생
(예) $('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
(예) $(window).load(function () { // run code });
■ .ready()
DOM이 준비된(완전히 로드된) 이후 발생하는 특별한 이벤트
- <body onload=""> 와 .ready() 는 양립할 수 없으며 둘중에 하나만 사용하도록 한다.
- 또는 jQeury의 $(window).load() 함수에서 attach 해서 사용한다.
.ready( handler ) version 1.0
- $(document).ready(handler) == $().ready(handler) == $(handler) == $(document).bind("ready", handler)
(예) $(document).ready(function() {
// Handler for .ready() called.
});
■ .unload()
페이지가 unload될 때 발생하는 이벤트
- "unload" 자바스크립트 이벤트
- 이 이벤트는 브라우저별로 다르게 동작할 수 있다. (http://api.jquery.com/unload/ 참조)
.unload( handler(eventObject) ) version 1.0
(예) $(window).unload( function () { alert("Bye now!"); } );
[Event Handler Attachment]
■ .bind()
선택된 element에 이벤트 핸들러를 붙인다.
- blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,
- mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
- change, select, submit, keydown, keypress, keyup, error
.bind( eventType, [ eventData ], handler(eventObject) ) version 1.0
(예) $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
(예) $('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); }); // 다중 이벤트
(예) $("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str);
}); // 이벤트 핸들러에 event 인자 포함
(예) $("p").bind("click", {foo: "bar"}, function(event){ alert(event.data.foo); }); // eventData 포함한 예제
(예) 커스텀 이벤트(Bind custom events)
.bind( events ) version 1.4
(예)
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
(예) 참고 : http://api.jquery.com/bind/
■ .unbind()
선택된 element의 선언된 이벤트 핸들러를 제거한다.
.unbind( eventType, handler(eventObject) )
(예) $('#foo').unbind(); // 선택된 element의 모든 이벤트 제거
(예) $('#foo').unbind('click'); // click 이벤트를 제거
(예) $('#foo').unbind('click', function() { alert('The quick brown fox jumps over the lazy dog.'); }); // 이벤트를 제거하면서 함수동작
■ .delegate()
선택된 Element의 selector의 이벤트 핸들러를 붙인다. (앞으로 추가될 element의 이벤트 핸들러도 적용된다.)
- live()함수를 보완하여 만들어진 함수
- http://honey83.cafe24.com/100
.delegate( selector, eventType, handler ) version 1.4.2
(예)
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
(예) $("body").delegate("a", "click", function() { return false; }) // 버블링 방지
(예) $("body").delegate("a", "click", function(event){ event.preventDefault(); }); // 기본 동작을 취소
.delegate( selector, eventType, eventData, handler ) version 1.4.2
(예) 커스텀 이벤트 --> http://api.jquery.com/delegate/
■ .undelegate()
선택된 Element의 이벤트 핸들러를 제거한다.
- (예) http://api.jquery.com/undelegate/
.undelegate() version 1.4.2
- 모든 이벤트 제거
.undelegate( selector, eventType ) version 1.4.2
(예) $("body").undelegate("p", "click");
.undelegate( selector, eventType, handler ) version 1.4.2
(예) $("body").undelegate("p", "click", function(){ "Does nothing..." }); // 이벤트가 제거되면서 function()함수가 호출된다.
■ .live()
선택된 element의 이벤트 핸들러를 바인드 한다.
- bind()와의 차이점은 append()등의 함수로 추가된 요소들에도 이벤트가 적용된다.
- 1.4.2버전 부터 live()함수를 보완한 delegate() 함수를 사용한다.
- eventType = click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
.live( eventType, handler ) version 1.3
(예) $("p").live("click", function(){ alert( $(this).text() ); });
(예) $("a").live("click", function() { return false; }) // 버블링 방지
(예) $("a").live("click", function(event){ event.preventDefault(); }); // 기본 동작을 취소
.live( eventType, eventData, handler ) version 1.4
(예) $("a").live("click", {foo: "bar"}, function(event){ alert(event.data.foo); });
■ .die()
선택된 element의 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.
.die( eventType, [ handler ] ) version 1.4.1
(예) $("p").die() // 모든 live 이벤트의 바인드를 제거한다.
(예) $("#theone").die("click"); // live 이벤트의 click 바인드를 제거한다.
(예) $("#theone").die("click", function(){ ... }); // die()함수가 호출되면서 function()함수가 호출된다.
■ .one()
bind() 함수처럼 선택된 element에 이벤트 핸들러를 붙인다. 하지만 딱 한번의 이벤트를 발생시킨다.
- 즉 bind() 함수의 이벤트 핸들러 내부에서 unbind()한다.
.one( eventType, [ eventData ], handler(eventObject) ) version 1.1
(예) $('#foo').one('click', function() { alert('This will be displayed only once.'); });
== $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });
■ .jQeury.proxy()
컨텍스트의 이벤트 핸들러를 리턴한다.
(예) http://api.jquery.com/jQuery.proxy/
■ .trigger()
선택된 element의 이벤트를 발생시킨다.
.trigger( eventType, extraParameters ) version 1.0
(예)
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
(예) custom event 트리거
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
(예)
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
(예) http://api.jquery.com/trigger/
■ .triggerHandler()
trigger()함수와 비슷하게 동작한다.
- 예외
1) form submission에는 동작하지 않는다.
2) 선택된 Element중 가장 첫번째 element만 영향을 미친다.
3) 브라우저의 기본동작(default actions), bubbling, live events는 일어나지 않습니다. 단순히 handler 메서드를 호출만 합니다.
http://api.jquery.com/triggerHandler/ 의 예제 참고
.triggerHandler( eventType, extraParameters ) version 1.2
[Event Object]
이벤트 핸들러(function(event)) 의 파라메터로 사용된다.
- var e = jQuery.Event("click");
멤버
- event.currentTarget
- event.data
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
(예) http://api.jquery.com/category/events/event-object/
[Form Events]
■ .focus()
자바스크립트의 focus 이벤트
- form 컨트롤의 포커스가 생겼을때 발생되는 이벤트
.focus( handler(eventObject) )
(예) $(select).focus(function( alert('focused'); ));
.focus()
- trigger('focus')와 같은 기능을 제공
■ .blur()
자바스크립트의 blur 이벤트
- form 컨트롤의 포커스를 잃어버림, focus이벤트의 반대기능
.blur( handler(eventObject) ) version 1.0
- .bind('blur', handler) 와 동일
(예) $('#target').blur(function() { alert('Handler for .blur() called.'); });
.blur() version 1.0
- trigger('blur')와 같은 기능을 제공
■ .change()
자바스크립트의 change 이벤트
-선택박스, 텍스트박스, 체크박스, 라디오버튼 등의 입력값, 선택값 변경 이벤트
.change( handler(eventObject) ) version 1.0
- .bind('change', handler) 와 동일
(예) $('#target').blur(function() { alert('Handler for .change() called.'); });
.change() version 1.0
- trigger('change')와 같은 기능을 제공
■ .select()
자바스크립트의 select 이벤트
- <input type="text">와 <textarea> 에만 사용된다.
- 텍스트가 선택될 때 발생되는 이벤트
.select( handler(eventObject) ) version 1.0
- .bind('select', handler) 와 동일
(예) $('#target').select(function() { alert('Handler for .select() called.'); });
.select() version 1.0
- trigger('select')와 같은 기능을 제공
■ .submit()
자바스크립트의 submit 이벤트
- <form> 요소에만 사용된다.
- <input type="submit">, <input type="image">, or <button type="submit"> 에서 submit하는 기능
.submit( handler(eventObject) ) version 1.0
- .bind('submit', handler) 와 동일
(예) $('#target').submit(function() { return true; });
.submit() version 1.0
- $('#target').submit(); == $('#target').trigger('submit')와 같은 기능을 제공
[Keyboard Events]
■ .focusin()
자바스크립트의 focusin 이벤트
- .bind('focusin', handler). 와 동일
- 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트
.focusin( handler(eventObject) ) version 1.4
(예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
■ .focusout()
자바스크립트의 focusout 이벤트
- .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
- 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트
.focusout( handler(eventObject) ) version 1.4
(예) http://api.jquery.com/focusout/
■ .keydown()
자바스크립트의 keydown 이벤트
- .bind('keydown', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 누르고 있을때 발생되는 이벤트
.keydown( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keydown/
(예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });
■ .keyup()
자바스크립트의 keyup 이벤트
- .bind('keyup', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트
.keyup( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keyup/
(예) $('#target').keyup(function(event) { alert('Handler for .keyup() called.'); });
■ .keypress()
자바스크립트의 keypress 이벤트
- .bind('keypress', handler). 와 동일
- 선택된 element가 포커스되어 있고 키보드를 눌렀을때 발생되는 이벤트
- 실제 키보드가 눌렸을때 발생되는 이벤트 순서 : keydown or keypress > keyup
.keypress( handler(eventObject) ) version 1.0
(예) http://api.jquery.com/keypress/
(예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });
KeyDown, KeyPress, KeyUp Event 차이
- http://mytory.textcube.com/495, http://hurrah.springnote.com/pages/1099088, http://winflahed.tistory.com/72
[Mouse Events]
■ .click()
선택된 element를 클릭했을때 발생하는 이벤트
.click( handler(eventObject) ) version 1.0
(예) $('#target').click(function() { alert('Handler for .click() called.'); });
.click() version 1.0
- $('#target').click(); == $('#target').trigger('click');
■ .dblclick()
선택된 element를 더블 클릭했을때 발생하는 이벤트
.dblclick( handler(eventObject) ) version 1.0
(예) $("p").dblclick( function () { alert("Hello World!"); });
.dblclick() version 1.0
- $('#target').click(); == $('#target').trigger('click');
■ .focusin()
자바스크립트의 focusin 이벤트
- .bind('focusin', handler). 와 동일
- 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트
.focusin( handler(eventObject) ) version 1.4
(예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
■ .focusout()
자바스크립트의 focusout 이벤트
- .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
- 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트
.focusout( handler(eventObject) ) version 1.4
(예) http://api.jquery.com/focusout/
■ .hover()
선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때에 발생되는 이벤트
- hover()를 unbind()할 경우 = $(obj).unbind('mouseenter mouseleave');
.hover( handlerIn(eventObject), handlerOut(eventObject) ) version 1.0
(예)
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
■ .mouseover()
자바스크립트의 mouseover 이벤트
- 선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
- .bind('mouseover', handler) 와 동일,
- 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseenter() 함수를 사용 (http://api.jquery.com/mouseover/)
.mouseover( handler(eventObject) ) version 1.0
(예)
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
.mouseover() version 1.0
■ .mouseout()
자바스크립트의 mouseout 이벤트
- 선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
- .bind('mouseout', handler) 와 동일,
- 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseleave() 함수를 사용 (http://api.jquery.com/mouseover/)
.mouseout( handler(eventObject) ) version 1.0
(예)
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
.mouseout() version 1.0
■ .mouseenter()
선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
- IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
- .bind('mouseenter', handler) 와 동일,
- 비슷한 함수 = .mouseover() , 차이점 : 버블링의 발생여부
.mouseout( handler(eventObject) ) version 1.0
(예)
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++n);
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
});
.mouseout() version 1.0
■ .mouseleave()
선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
- IE에서만 제공되는 mouseleave 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
- .bind('mouseleave', handler) 와 동일,
- 비슷한 함수 = .mouseout() , 차이점 : 버블링의 발생여부
.mouseout( handler(eventObject) ) version 1.0
(예) .mouseenter() 함수 예제 참고
.mouseout() version 1.0
■ .mousemove()
선택된 element에 마우스가 포인터가 움직일때 발생되는 이벤트
- .bind('mousemove', handler) 와 동일,
.mousemove( handler(eventObject) ) version 1.0
(예) $("div").mousemove(function(e){ alert(e.pageX + " / " + e.pageY); } );
.mousemove() version 1.0
■ .mousedown()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
- .bind('mousemove', handler) 와 동일,
.mousedown( handler(eventObject) ) version 1.0
(예)
$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});
.mousedown() version 1.0
■ .mouseup()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
- .bind('mouseup', handler) 와 동일,
.mouseup( handler(eventObject) ) version 1.0
(예) .mousedown() 함수 예제 참고
.mousedown() version 1.0
■ .toggle()
선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
.toggle( handlerA(eventObject), handlerB(eventObject), [ handlerC(eventObject) ] ) version 1.0
- handlerA(eventObject) : 짝수번째 클릭시 이벤트
- handlerB(eventObject) : 홀수번째 클릭시 이벤트
- handlerC(eventObject) : 추가 핸들러로 클릭 후에 A,B 이벤트핸들러가 발생된 이후 발생되는 이벤트
(예)
$('#target').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
.toggle( [ duration ], [ callback ] ) version 1.0
(예) http://api.jquery.com/toggle/ 참고
