합성이벤트
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
RedUTF8.exe