jQuery Event

jQuery Event

사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있도록 메소드를 지원

예전 웹 프로그램 개발 시에는 HTML과 자바스크립트를 혼용(흔히 말하는 스파게티)하여 사용을 하였으나, 웹 표준이 자리를 잡고 코드 분리를 통한 유지보수 반복적인 패턴의 코드중복을 피하기 위해 스크립트를 통해 HTML 요소와 이벤트를 맵핑하는 방식으로 개발을 하고 있다.

이전방식

<script type="text/javascript">
    function tdClick(obj) {
        alert(obj);
    }       
</script>

<tr>
    <td onclick="tdClick('1');">#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td onclick="tdClick('6');">#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

이전엔 위의 예제와 같이 필요한 함수를 만들고, 해당 이벤트가 필요한 요소에 일일이 적용하였다.

 

jQuery사용

<script type="text/javascript">
    $(document).ready(function () {
        $("td").click(function () {
            alert($(this).text());
        });
    });
</script>
<tr>
    <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

HTML 요소에는 아무런 작업을 하지 않았다.

처음에는 어색하고 오히려 불편하다고 느낄 수 있으나, HTML에서 사용하는 이벤트가 많아지고 동적으로 이벤트와 HTML의 요소를 맵핑하는 기능 구현 시에는 정말 없어서는 안돼는 최고의 방법이다.

 

[ KeyBoard Events ]

.keydown()	키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다.
.keypress()	keydown이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등 특수키에는 발생하지 않는다.
.keyup()	키 입력 후 발생되는 이벤트

Keyboard Event : http://isstory83.tistory.com/77

 

[ Mouse Events ]

.click()	마우스 클릭 시 발생하는 이벤트
.dbclick()	마우스 더블클릭 시 발생하는 이벤트
.mouseup()	마우스 클릭 후 발생되는 이벤트
.mousedown()	마우스 클릭 시 발생하는 이벤트
.toggle()	두 개 이상의 이벤트를 순차적으로 실행되게 한다.  링크나 버튼에 선언 할 경우 .prevent Default를 수행하기 때문에 원래의 동작은 실행되지 않는다.
.mouseover()	선택한 요소의 영역에 마우스 포인터가 올라갈 때 발생하는 이벤트
.mouseout()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트
.mousemove()	선택한 요소의 영역에서 마우스 포인터가 움직일 때 발생하는 이벤트
.mouseenter()	선택한 요소의 영역에서 마우스가 위치했을때 발생되는 이벤트
.mouseleave()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트  IE에서만 발생되는 이벤트이지만 jQuery는 브라우저 관계 없이 사용할 수 있도록 시뮬레이터된다.
.hover()	선택한 요소의 영역에 마우스 포인터가 들어오고 나갈 때 발생하는 이벤트 동작 설정

Mouse Events : http://isstory83.tistory.com/76

 

[ Form Events ]

.focus()	요소에 포커스 되었을 때 발생하는 이벤트
.blur()	요소에서 포커스를 잃을 경우에 발생하는 이벤트
.change()	<input />, <textarea />, <select /> 요소의 값 변경 시 발생하는 이벤트
.select()	선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트
.submit()	Submit이 일어날 때(서식이 전송될 때) 발생하는 이벤트, return false로 서식 전송을 막을 수 있다.

Form Events : http://isstory83.tistory.com/79

Form Events -  .submit() : http://isstory83.tistory.com/85

 

[ Document Loading ]

.load()	페이지 로딩이 완료되었을 때 발생하는 이벤트
.ready()	DOM이 모두 준비 되었을 때 발생하는 이벤트
.unload()	페이지를 벗어날 때 발생하는 이벤트

Document Loading : http://isstory83.tistory.com/80

 

[ Browser Events ]

.error()	오류가 발생할 때 발생되는 이벤트
.resize()	화면 크기가 변경될 때 발생하는 이벤트
.scroll()	스크롤이 움직일 때 발생하는 이벤트

Browser Events : http://isstory83.tistory.com/83

 

[ Event handler Attachment ]

.bind()	요소에 이벤트 핸들러를 지정
.unbind()	지정된 이벤트 핸들러를 삭제
.one()	.bind()와 동일하지만 이벤트가 한 번 실행된 후 .unbind()가 된다.
.live()	앞으로 생성될 요소에도 이벤트 핸들러를 지정  이벤트 델리게이션(Event Delegation)을 사용하여 새로 생성되는 요소에도 이벤트가 적용된다는 점에서 .bind()와 다르다.
.die()	.live()로 생성된 이벤트 핸들러를 삭제한다.
.delegate()	특정 요소에 이벤트 핸들러를 지정  .live()와 동일하지만 이벤트를 루트 요소가 아니라 특정 DOM 요소에 지정 가능
.undelegate()	.delegate()로 생성된 이벤트 핸들러를 삭제
.trigger()	요소에 지정된 이벤트 핸들러와 동작을 실행시킨다.
.triggerHandler()	.trigger()와 동일하지만 지정된 핸들러 동작만 수행

Event Handler Attachment - .bind() & .unbind() : http://isstory83.tistory.com/81

Event Handler Attachment - .one() & .live() & .die() : http://isstory83.tistory.com/82