2012.12.07 학습일지(3장-02)

합성이벤트

jQuery의 사용자 정의 핸들러로 .toggle()과 .hover() 메서드가 있으며, 합성 이벤트 핸들러라고 부른다.

.toggle() 메서드

두 개 이상의 함수 인자를 가진다.

처음 클릭하면 첫 번째 함수가 실행, 두 번째 클릭하면 두 번째 함수가 실행된다.

.toggleClass() 메서드

클래스의 존재 유무를 검사해 자동으로 추가하거나 제거해준다.

$('#btn').toggleClass('hidden'); // hidden 클래스가 btn에 있으면 제거, 없으면 추가

.hover() 메서드

두 개의 함수를 인자로 가진다.

마우스 커서가 들어가면 첫 번째 함수가 실행, 커서가 벗어나면 두 번째 함수가 실행된다.

$('#btn').hover(function() {

$(this).addClass('hover');

}, function() {

$(this).removeClass('hover');

});

이벤트의 여행

페이지에서 이벤트가 발생하면 DOM 전체 계층에 있는 모든 요소가 이벤트를 처리할 기회를 가진다.

반응에 대한 책임!

- 이벤트 캡처링

모든 것을 감싸고 있는 최상위 요소에게 이벤트가 처음으로 주어지고 그 후 연속해서 하위 요소로 전달된다.

- 이벤트 버블링

가장 낮은 자식 요소에 처음으로 전달되고, 반응 후 부모 요소에게 전파된다.

이벤트는 두 가지 과정 각각에 등록할 수 있다.

jQuery는 버블링 단계에 이벤트 핸들러를 등록한다. -> 첫 번째 이벤트 반응이 항상 최하위 특정 요소임을 보장받음

이벤트 버블링의 부작용

<div> <-  여기에 mouseout 이벤트 핸들러가 걸려 있는데

<a>test</a> <- 여기 커서를 벗어나면 mouseout 이벤트가 보내질 것이고, 버블링되어 div에 걸려있는 mouseout 이벤트 핸들러가 실행 될것이다.

</div>

원치 않는다! .mouseenter과 .mouseleave 이벤트는 개별적으로 연결되고, .hover()메서드로 문제를 방지할 수 있다.

진행 경로 수정하기 : 이벤트 객체

<div> <- 여기에 클릭하면 사라지게 이벤트 핸들러를 걸어놨는데,

<button>btn</button> <- 버튼 클릭하면 div가 사라진다. 이벤트 버블링 때문에!

</div>

이벤트 객체에 접근 할 수 있어야한다. -> 이벤트가 발생할 때 각 요소의 이벤트 핸들러로 넘겨지는 DOM 객체!

$(document).ready(function() {

$('#mydiv').click(function(event) { // 매개변수를 추가하면 된다. 이름은 자유.

if(event.target == this) {

$('.btn').toggleClass('hidden');

}

});

});

event 변수를 추가함으로써 핸들러에서 이벤트 객체를 사용할 수 있다.

event.target 프로러티를 사용하면 어느 이벤트가 처음으로 받은 요소인지(click 이벤트는 실제로 클릭된 요소) 알 수 있다.

this는 현재 이벤트를 처리하고 있는 DOM 요소이다.

이벤트를 받고 있는 애가 지금 처리하고 있는 mydiv일 때만(this) 버튼들을 숨긴다. 버튼을 누르면 안숨긴다.

.stopPropagatin() 메서드를 이용하여 이벤트 객체는 버블링 과정을 완전히 중단 할 수 있다.

기본 동작을 원치 않을 때 이벤트에 .preventDefault() 메서드를 호출하면 이벤트에 의해 기본 동작이 수행되는 일을 방지 할 수 있다. -> 잘 이해가 되지 않는다..ㅜㅜ

이벤트 위임

이 부분 잘 이해되지는 않는데, 버블링을 이용해서 이득을 얻을 수 있는 기법이라는 것 같다.

이벤트 위임을 활용해서 하나의 요소가 다른 여러가지 작업을 수행할 수 있도록 핸들러를 추가할 수 있다.

성능과 관련해서 얘기하는 것 같다...;

.is()는 현재 jQuery 객체가 지정한 선택자 표현식을 만족시키는지 검ㄴ사, 선택자에 해당하는 요소가 하나라도 있으면 true 반환.

이벤트 핸들러 제거하기

.unbind() 메서드를 사용한다.

$('.btn').unbind('click');

이벤트 네임스페이스 -> 잘 모르겠으나, 함수를 나중에 쓰기 위함인듯.. bind('식별하고자하는 이벤트이름', function()');

이벤트 다시 바인딩하기

funciton 함수가 변수에 할당된 경우를 종종봤는데, 이게 도대체 다른 점이 무엇인가 생각했었는데, 핸들러에 함수에 이름을 부여하는 것이었다.

var myfun = function(event) { ... };

나중에 이 함수를 다시 바인딩하고 싶을 때는 .bind('click', myfun); 이렇게 사용한다.

.one() 메서드는 이벤트 핸들러가 한 번만 호출된 후 바로 해제되기를 원하는 상황에서 사용한다.

$('.btn').one('click',myfun);

사용자 상호작용 흉내 내기

실제 이벤트가 발생하지 않았지만, 이벤트 핸들러 코드를 실행하고 싶을 때!

예로 페이지 로드할 때 원하는 객체에 click 이벤트가 실행된 상태에서 로드되길 원할 때!

$('.btn').trigger('click'); = $('.btn').click();

키보드 이벤트

종류 1. 키보드에 직접 반응하는 이벤트(keyup, keydown) - 어떤 키를 눌렀는지 알고 싶으면

종류 2. 텍스트 입력에 반응하는 이벤트(keypress) - 어떤 글자가 입력됐는지 알고 싶다면

키보드 이벤트 대상은 포커스를 가진 요소!

어떤 키를 눌렀는지 알기 위해 event 객체를 조사한다.

event.keyCode 프로퍼티는 눌려진 키에 대한 식별 값이 있 으며, 알파벳 키에 대해서 이 값은 대문자 ASCII 값이다.

그러므로 글자가 눌릴 때 매핑시키는 맵 또는 문자 객체를 만들어서 맵에 있는 확인하고, 그 값에 따라 이벤트 실행.

p.80