[Jquery] 강의 3일차 (삼성 SDS) - 오후16장 Event

jquery cheat sheet 를 구글 창에서 검색을 하면

아래의 URL 이 나온다. 일종의 도움말 같은 Site로 매우 유용하다.

http://oscarotero.com/jquery/

참고로 이런 이벤트는 Jquery 버전별로 많이 다르므로 참고 바란다.

---

원래 Jquery는 아래와 같은 함수의 param을 가지고 있다.

$("div.detail").click(function(){

$("h1", this)   //1

$(this).find("h1")   //2

});

1과 2의 의미는 똑같다.

그런데 1과 2중에서 그럼 뭘 써야 할까?

답 : 1번을 쓰면 내부적으로 2번 코드로 바꾼다. 따라서 2번으로 사용하면 된다.

JQuery = function(selector, context){

context는 생략할수 있는데 생략하면 그냥 document가 된다.

context의 의미는 어느 범위에서 찾을것이가의 의미이므로 find와 같은 기능이라고 보면 된다.

}

---

--442 page 참고

1. bind() , unbind()

  $("#a").bind("click", function() {

                        ↑ 반드시 소문자로 입력해야 한다.               

  }); 

  $("#a").unbind(); //모든 이벤트 제거

  $("#a").unbind("click");      //click 이벤트에 걸려 있는 모든 함수 제거

2. shorthand event method

  $("#a").click(function() {

  });

  

3. event 객체

  - JS에서는 IE, Non IE의 이벤트 처리 방식이 다름.

  - jQuery이벤트는 브라우저에 대해 독립적이다. (동일한 코드를 사용)

  $("#a").click(function(e) {

  });

3.1 기본 이벤트

<a herf = "http://www.naver.com">네이놈<a>

위의 부분을 클릭을 했을때 herf의 내용으로 이동된다.

우리는 저런 부분에 대해 이벤트 등록을 하지 않았지만, 내장되어 있는 기본 이벤트라 한다.

내장 팝업도

4. 이벤트 연결 종류(427페이지)

  on           <--->       off

  bind <---> unbind

  delegate<---> undelegate

  live <---> die

  * live는 1.9버전부터 지원하지 않음.

    --> 대신에 on() 을 사용할 것

저 이벤트에 각 차이가 있다!!!

5. key event

  가. 이벤트 발생 순서

    - 키보드 누름

    - keydown 이벤트 발생

    - keypress 이벤트 발생

    - 글자가 입력됨.

    - 키보드 뗌

    - keyup 이벤트 발생

  나. keypress 이벤트

    - 대소문자 구분됨. e.keyCode 값으로 ASCII 코드값 리턴

    - 화면에 보이지 않는 키들은 탐지 불가(Tab, backspace, Ctl, Shift);

  다. keyup, keydown 이벤트

    - 대소문자 구분 없음.

    - 화면에 보이지 않는 키만 눌러도 탐지 가능

  

---

1. 

$("button.detail").on("click",function(e){

});

$("button.detail").bind("click",function(e){

});

2. 이벤트 미리 걸기(이벤트 위임(delegate) 설정

$("container").on("click","button.detail",function(e){

});

$("container").delegate("button.detail","click",function(e){

});

3.document 수준(live는 1.6까지 지원)

$("button.detail").live("click",function(e){

});

$(document).on("click","button.detail",function(e){

});

---

유용한 Tip

 * 좌표 값에 대한 설명

1. Page x,y : Document 상의 좌표

2. Client x,y : 브라우져 화면상의 좌표

3. Offset x,y : Event가 발생한 element 상의 좌표

 

4. screen x,y : Monitor 화면상의 좌표

좌표 표기법(position)

1 : absolute

2 : fixed

3 : relative

static : 먼저 작성된 순서대로 차곡차곡