Event method는 선택한 요소에 대하여 이벤트 핸들러에 함수를 트리거하거나 연결합니다.
Event 관련 jQuery 함수의 종류는 아래와 같습니다.
bind() : 요소(element)에 이벤트 처리기(handler)를 연결합니다.(바인딩이라고 하죠)
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
// 위의 구문을 보면 bind()의 역할은 id값 foo인 요소에 대하여 click 이벤트에 연결하게 합니다. 유저가 이 foo 요소를 클릭하면 알림창이 나타나게 됩니다.
blur() : JavaScript 이벤트인 "blur"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').blur(function() {
alert('Handler for .blur() called.');
});// 위의 구문을 보면 첫번째 필드에 포커스를 위치시켰다가, 다른 곳을 클릭하거나 키보드의 탭키를 이용해서 포커스를 이동시켜 보시면 Handler for .blur() called. 이라는 알림창이 나오게 됩니다
change() : JavaScript 이벤트인 "change"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
$('.target').change(function() {
alert('Handler for .change() called.');
});
// 위의 구문은 select의 값을 변경시키면 알림창이 뜹니다. text input에는 값을 바꾼 후 다른 곳을 클릭하면 알림창이 뜹니다. 만일 포커스의 이동없이 .change() 이벤트를 발생시키려면 아래 구문을 추가하시면 됩니다.
$('#other').click(function() {
$('.target').change();
});
click() : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
$('#target').click(function() {
alert('Handler for .click() called.');
});
// 위의 구문은 아이디 target 을 클릭하면 알림창이 나타납니다.
dblclick() : JavaScript 이벤트인 "click"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
<div id="target">
Double-click here
</div>
<div id="other">
Trigger the handler
</div>
$('#target').dblclick(function() {
alert('Handler for .dblclick() called.');
});
// 위의 구문은 아이디 target 을 더블클릭하면 알림창이 나타납니다.
delegate() : 루트 요소의 특정 집합을 기반으로, 지금 또는 나중에, 선택과 일치하는 모든 요소에 대해 하나 이상의 이벤트 처리기를 묶어줍니다. jQuery 1.7 에서, .delegate() 를 .on() 함수가 대체하게 되었습니다
<p>Click me!</p>
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
// 위의 구문은 p태그를 클릭하면 그 뒤에 "<p>Another paragraph!</p>" 문구가 추가 됩니다. "p", "click" 를 묶은것을 볼 수 있습니다.
die() : .live() 함수로 바인딩 된 모든 이벤트들을 제거합니다. jQuery 1.7에서는, .die() (그리고 보완적인 함수인, .live()) 에 대하여 다루지 않습니다. 대신, .on() 함수로 바인딩된 이벤트를 제거하기 위해 사용되는 .off() 의 사용법에 대해 기술하고 있습니다.
error() : 선택된 요소에 error 이벤트를 실행시키거나 임의의 함수를 묶어 줍니다.
event.pageX : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 X좌표 값
<div id="log">마우스를 올려보세요.</div>
$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});
// 마우스를 아이디 log에 가져가면 마우스의 좌표값이 숫자로 나타나게 됩니다.
event.pageY : 문서의 왼쪽 가장자리를 기준으로 마우스 위치의 Y좌표 값. 예제 구문은 위 event.pageX 참조요~
event.target : 이벤트가 시작되는 DOM 요소입니다.
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
});
// 위의 구문은 body 즉 body를 둘러싼 모든 요소에 대하여 클릭이 이루어졌을 경우 nodeName 즉 태그요소(p,strong,span등)에 대한 메시지를 출력하게 됩니다.
event.timeStamp : 이전 이벤트와 현재 이벤트가 발생한 시간의 차이를 밀리세컨드(milliseconds)를 기준으로 알려줍니다.
event.type : 어떤 이벤트가 호출되었는지 알려줍니다. 개인적으로 자바스크립트에서 종종 이용을 하는데 엔터키를 눌렀을때 포커스를 이동할때 많이 이용했던 이벤트네요.
event.which : 어떤 이벤트를 실행했는지에 대한 정보를 알려줍니다. 키보드의 숫자키는 48부터 57사이에 있는데 event.which == 48 은 키보드 "1"에 해당합니다. 예를 들어 숫자만 입력가능케 할때 종종 사용하죠
focus() : "focus" JavaScript 이벤트를 바인드 하거나 요소에 해당 이벤트를 발생시킵니다.
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').focus(function() {
alert('Handler for .focus() called.');
});
// 위 구문은 아이디 target에 탭키 또는 마우스로 포커스되었을때 알림창을 실행하게 됩니다.
focusin()
focusout()
jQuery 1.4부터 추가된 함수입니다. 말그대로 포커스가 들어왔을때 그리고 나갔을때 실행을 하게됩니다.
hover() : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다. hover() 함수는 mouseenter 와 mouseleave 이벤트들을 한번에 바인딩합니다.
keydown() : 이벤트는 유저가 키보드를 누르는 순간 요소에 이벤트를 발생시킵니다. 이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다
<form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});
//input 필드에 포커스를 위치 시키고 키보드를 누르면 알림창이 나타납니다.
keypress() : JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다. keypress 이벤트는 브라우져가 키보드 입력을 받았을 때 요소에 이벤트를 발생시킵니다. 이 이벤트는 keydown와 비슷합니다만 키가 반복적으로 눌려질 경우에는 조금 다릅니다. 만약 유저가 키를 누르고 그 상태를 유지하고 있다면 keydown 이벤트는 한번 발생하지만 keypress 이벤트는 문자가 찍힐 때마다 발생합니다. 게다가 보조키(Shift 같은)는 keydown는 이벤트가 발생하지만 keypress 이벤트는 발생하지 않습니다.
keyup() : JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다.keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 요소에 이벤트를 발생시킵니다. 이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다.
live() : 현재 및 미래의, 현재의 선택과 일치하는 모든 요소에 대하여 이벤트 처리기를 연결합니다.
jQuery 1.7에서 live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.
이 함수는 페이지의 document 요소에 이벤트 핸들러 연결을 할 수 있습니다. 페이지에 동적 컨텐츠를 추가하는 쉬운 방법입니다. 더 많은 정보를 얻기를 원하시면 .on() 함수를 참고하시기 바랍니다.
load() : 이벤트 "load" 를 바인딩 합니다.load 이벤트는 모든 요소들이(포함한 하위 요소까지도) 완전히 읽혀(load)졌을 때 발생합니다. 이 이벤트는 a URL: images, scripts, frames, iframes, 그리고 window 객체와 같은 특정한 요소들에서 사용할 수 있습니다.
mousedown() : JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.mousedown 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 누르면 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseenter() : 요소에 마우스가 진입했을 때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다. mouseenter 자바스크립트 이벤트는 Explorer전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에 마우스 포인터가 진입하면 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseleave() : 요소에서 마우스가 떠날때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다. mouseleave 자바스크립트 이벤트는 Explorer 전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에서 마우스 포인터가 떠날 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseleave 이벤트는 mouseout 이벤트와 이벤트 버블링의 관점에서 조금 다릅니다. 만약 위 예에서 mouseout 를 사용했다면, 마우스 포인터가 Inner 요소 바깥으로 나가도 이벤트가 발생하게 됩니다만 일반적으로 좋은 방법이 아닙니다. 반면 mouseleave 이벤트는, 바인딩 된 요소에 마우스 포인터가 빠져나가야만 발생하고 자식 요소에는 이벤트가 발생하지 않습니다. 그래서 이 예제에서는 마우스가 Outer 요소에서 빠져나가야만 이벤트가 발생하고, Inner 요소에서는 발생하지 않는 것입니다.
mousemove() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.
이 함수는 .bind('mousemove', handler) 와 .trigger('mousemove') 를 줄여 표현한 것입니다.
mousemove 이벤트는 요소 안에서 마우스 포인터가 움직일 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseout() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.
이 함수는 .bind('mouseout', handler) 와 .trigger('mouseout') 를 줄여 표현한 것입니다.
mouseout 이벤트는 요소에서 마우스 포인터가 떠날때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseover() : JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.
이 함수는 .bind('mouseover', handler) 와 .trigger('mouseover') 를 줄여 표현한 것입니다.
mouseover 이벤트는 요소에 마우스 포인터가 올라올 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
mouseup() : JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.
이 함수는 .bind('mouseup', handler) 와 .trigger('mouseup') 를 줄여 표현한 것입니다.
mouseup 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 눌렀다 뗄때 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
off() : 이벤트 핸들러 해제하기.
off() 함수는 .on() 함수에 의해 바인딩 된 이벤트 핸들러를 제거합니다. 바인딩에 대한 내용은 .on() 함수를 살펴보시기 바랍니다. 특정 이벤트 처리기는 이벤트 이름, 네임 스페이스, 선택자, 또는 핸들러 함수 이름의 조합을 제공하여 요소에서 이벤트의 바인딩을 해제할 수 있습니다. 여러개의 필터 인자를 제공하면, 모든 인자들과 일치하는 것만 바인딩이 해제됩니다.
만약 "click"과 같은 간단한 이벤트 이름을 인자로 사용하면, 직접 추가하거나 나중에 바인딩 한 모든 이벤트들을 jQuery 집합 안에 있는 요소에서 제거시킬 수 있습니다. 플러그인으로 사용하여 코드를 작성하는 경우, 또는 단순히 대규모 코드 기반으로 작업을 할 때, 가장 좋은 방법은 코드가 실수로 다른 코드에 의해 연결된 이벤트 처리기를 제거하지 않도록 네임 스페이스를 사용하여 이벤트를 부착하고 제거하는 것입니다. 특정 네임 스페이스에 속한 모든 유형의 모든 이벤트는 ".myPlugin" 과 같은 네임스페이스를 이용하여 바인딩을 해제할 수 있습니다. 최소한 네임 스페이스 또는 이벤트 이름 중 하나가 제공 되어야 합니다.
특정 이벤트 핸들러를 제거하기 위해서는 selector 인자로 해야 합니다. 이 선택자(selector) 문자열은 .on() 함수에서 바인딩에 사용했던 인자와 동일해야 합니다. 핸들러에서 프로그래밍을 통해 바인딩 한 이벤트에 영향을 주지 않고 제거하기 위해 "**" 같은 특수한 값을 사용할 수 있습니다.
on() : 선택된 요소에 하나 이상의 이벤트들을 붙여줍니다. on() 함수는 jQuery 객체 안의 현재 선택된 요소 집합과 이벤트 핸들러를 묶어 줍니다. jQuery 1.7 에 와서, .on() 함수는 이벤트 핸들러 바인딩에 필요한 모든 기능을 제공합니다. 이전 버젼의 jQuery 이벤트 함수에 대한 도움말을 원하시면 bind(), delegate(), live() 함수에 대한 내용들을 참고하세요.
$("p").on("click", function(){
alert( $(this).text() );
});
//p 태그를 클릭하면 알림창이 나타납니다.
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
//이벤트 핸들러에 데이터를 전달하고, foo 값을 알림창으로 보여줍니다.
$("form").on("submit", false)
//폼의 submit를 막고 false를 인자로 하여 이벤트가 버블링되는 것을 차단합니다.
one() : 요소에 이벤트 처리기를 연결합니다. 핸들러는 대부분 한번씩 실행됩니다.
이 함수의 첫번째 형태는 이벤트가 호출된 후 핸들러에서 이벤트가 해제되는 부분을 제외하면 .bind() 함수와 같습니다. 두번째 형태는 jQuery 1.7에 와서야 소개됩니다. .on() 함수와 동일한데, 호출된 후 핸들러에서 이벤트가 제거되는 부분이 다릅니다.
$("#foo").one("click", function() {
alert("This will be displayed only once.");
});
// 이 코드가 실행되면, foo 인 요소를 클릭하면 알림창이 나타납니다. 그 다음 클릭에는 아무런 일도 일어나지 않습니다. 아래 코드와 동일한 작동을 하게 되는 것입니다. one의 의미가 1이자나요. 그래서 1번이라는 제한을 두기 위해 이 함수가 만들어지지 않았나 합니다.
ready() : DOM 전체가 로드되면 기능이 실행됩니다. 최근 자바스크립트 어플리케이션은 일반적으로 DOM이 완전히 로드된 후 코드를 수행합니다. 따라서 웹 브라우저가 DOM은 완전히 로드했으나 이미지나 SWF파일 같은 자원들을 아직 로드하지 못한 시점을 알아내기 위한 방법이 필요합니다. 그래서 window.onload를 이용한다면 자원을 포함한 전체문서 로드를 기다려야 하므로 기다리는 시간이 길어질 수 있습니다. 따라서 지금 필요한 건 DOM그 자체가 탐색과 조작을 위한 준비가 끝났다는 이벤트이고 그 역할을 해주는 것이 ready메서드 입니다.
resize() : JavaScript 이벤트를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 적용시킵니다. 이 함수의 첫번째 두번째 용법은 bind('resize', handler) 의 줄임 표현입니다. 세번째 용법은 trigger('resize') 의 줄임 표현입니다. resize 핸들러 안의 코드는 핸들러가 호출될 때마다 실행되지는 않습니다. 구현 방법에 따라, resize 이벤트는 사이즈가 변화하는 동안 연속적으로 발생할 수 있습니다. (전통적인 방식인 Internet Explorer 와 WebKit-based 브라우져인 Safari 와 Chrome 같은 브라우져등) 또는 단 한번만(Opera 등) 실행되는 경우도 있습니다.
scroll() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 이 함수의 첫번째, 두번째 용법은 .bind('scroll', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('scroll') 를 줄여 표현한 것입니다.
scroll 이벤트는 스크롤이 움직일 때 발생합니다. 이것은 window 객체에서 제공됩니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다.
select() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 함수의 첫번째, 두번째 용법은 .bind('select', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('select') 를 줄여 표현한 것입니다.
scroll 이벤트는 유저가 텍스트를 선택하면 발생합니다. 이것은 <input type="text"> 필드와 <textarea> 박스에서 발생합니다. 또한 스크롤이 가능한 프레임이나 overflow CSS 속성이 있는 요소의 scroll (또는 auto 속성) 에서도 발생합니다.
submit() : JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다. 이 함수의 첫번째, 두번째 용법은 .bind('submit', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('submit') 를 줄여 표현한 것입니다.
submit 이벤트는 유저가 폼 전송(form submit)을 시도할 때 발생합니다. 이 이벤트는 오로지 <form> 요소에만 바인딩할 수 있습니다. 폼(Form)은 <input type="submit">, <input type="image">, <button type="submit"> 들을 클릭하거나 폼의 어떤 요소에서 Enter 키를 눌러서 전송할 수 있습니다.
toggle() : 조건에 일치하는 요소에 클릭 때 실행될 하나 이상의 핸들러를 바인딩합니다. toggle() 함수는 click 이벤트에 핸들러를 바인딩하고, click 때마다 실행될 기능도 처리할 수 있게 해줍니다. 이 함수는 이전 jQuery 포스팅내용에서 워낙 많이 나온 함수라서, 자세히 알고 싶은분들은 아래 참조 사이트나 포스팅된 내용 참조하시면 되겠습니다~
trigger() : 특정 이벤트 유형에 대해 선택된 요소에 연결된 모든 핸들러와 동작(behavior)을 실행합니다. trigger() 함수는 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜 줍니다. trigger() 함수를 사용해서 사용자가 일으킬 이벤트를 임의적으로 순서에 따라 발생시킬 수 있습니다.
triggerHandler() : 이벤트 요소에 연결된 모든 처리기(handler)를 실행합니다. triggerHandler() 함수는 trigger() 함수와 유사한 동작을 합니다. 단 아래의 예외 사항이 있습니다.
- triggerHandler() 함수는 이벤트의 기본 동작을 발생시키지는 않습니다. (form 전송과 같은).
- trigger() 함수는 jQuery 객체와 매치되는 모든 요소들에서 동작하는 반면, triggerHandler() 함수는 오직 일치하는 요소 증 첫번째 요소에서만 동작을 합니다.
- triggerHandler() 로 만들어진 이벤트는 DOM 구조를 따라 버블링 되지 않습니다. 만약 타겟이 되는 요소를 직접 핸들링하지 않으면, 그 요소에서는 아무런 일도 일어나지 않습니다.
- jQuery 객체를 반환하는 대신에, triggerHandler() 는 마지막 핸들러가 발생하여 생긴 반환값(value)가 있던 없던 값(value)을 반환합니다. 만일 핸들러가 실행되지 않았다면, undefined을 반환합니다.
unbind() : 이전에 연결된 이벤트 핸들러를 요소에서 제거합니다. bind() 함수로 바인딩한 이벤트 핸들러를 해제하기 위해서 unbind() 를 사용합니다. 간단한 경우에는, 인자없이 .unbind() 를 사용하여 요소의 모든 이벤트의 바인딩을 해제합니다. 단, jQuery 1.7 부터는, .on()과 .off() 함수로 대체되었습니다.
undelegate() : 루트 요소의 특정 집합에 기반을 두고, 현재 선택과 일치하는 모든 요소에 대한 이벤트로부터 핸들러를 제거합니다. undelegate() 함수는 .delegate() 로 바인딩된 이벤트 핸들러들을 해제합니다. 단 jQuery 1.7에 와서는 on()과 off() 함수로 대체되었습니다.
unload() : JavaScript 이벤트를 바인딩합니다. 이 함수는 bind('unload', handler)을 줄여놓은 것입니다.
unload 이벤트는 유저가 페이지를 벗어날 때 window 요소에서 발생합니다. 이것은 많은 상황을 의미하는데, 유저가 링크를 클릭해서 다른 쪽으로 이동했거나 새로운 URL을 치고 다른곳으로 빠져나갔다거나 하는 것을 의미하게 됩니다. 앞으로 뒤로 버튼도 발생합니다. 브라우져를 종료시켜도 발생합니다. 심지어 페이지 새로고침을 하면 unload 이벤트가 제일 처음 발생합니다.
unload 이벤트는 브라우져 버젼별 특성을 타기 때문에 다루는 데에 한계가 있습니다. 예를 들어, some versions of Firefox의 어떤 버전에서는 링크를 따라가면 발생하지만 윈도우를 닫으면 발생하지 않기도 합니다.
참조 URL : http://api.jquery.com/
위와 관련된 모든 내용(예제, 함수설명등)은 jquery 사이트에 있습니다.
"http://api.jquery.com/함수명/" 즉 http://api.jquery.com/bind/ , http://api.jquery.com/focusin/ 등 해당하는 이벤트의 단어를 http://api.jquery.com/ 뒤에 붙여주면 내용과 예제가 나옵니다.
그럼 오늘 하루도 즐프되세요~
'PHP > PHP Reference ' 카테고리의 다른 글
| PHP 5 Array 함수 (0) | 2013.07.25 |
|---|
