이번 장에서는 이벤트에 대해 조금더 상세히 다루도록 하겠다.


* 마우스 이벤트의 종류


마우스 이벤트 

설명 

 click

 마우스를 클릭했을 때 발생

 dblclick

 마우스를 더블 클릭했을 때 발생

 mouseenter

 마우스가 해당요소 안으로 진입했을 때 발생

 mouseleave

 마우스가 해당요소 밖으로 나갔을 때 발생

 mousedown

 마우스의 왼쪽키가 눌린 경우

 mouseup

 마우스의 눌렸던 왼쪽키가 풀린 경우

 hover

 mouseenter 와 mouseleave 이벤트의 묶음


syntax>

$(셀렉터).이벤트액션(실행할 function)


mouseenter 와 mouseleave 이벤트는 다음 그림과 같다.



해당 태그 안으로 진입할 경우 mouseenter 이벤트가 밖으로 나갈 경우는 mouserleave 이벤트가 발생한다. 이 두가지 동작을 하나로 합친 이벤트가 hover 이다



$("table").mouserenter(function(){

alert("테이블에 들어옴");

});

$("table").mouserleave(function(){

alert("테이블에서 나감");

});


▼

hover 로 변경

syntax>

$(셀렉터).이벤트액션(마우스 enter 이벤트 function , 마우스 leave 이벤트 function)


$("table").hover(function(){

alert("테이블에 들어옴");

    },

    function(){

    alert("테이블에서 나감");

});



* 키보드 이벤트의 종류


키보드 이벤트 

설명 

 keypress

 키입력에 대한 이벤트, keydown,keyup 과 다른 것은 쉬프트, 탭 등의 키는 이벤트를 발생시키지 않는다. 또한 한글에 대해서 이벤트를 발생하지 않는다.

 keydown

 키가 눌렸을 때 이벤트

 keyup

 키의 눌림이 풀렸을 때 이벤트


* 폼 이벤트의 종류


폼 이벤트 

설명 

 submit

 서버의 전송을 위한 이벤트

 change

 내용이 변경되었을 때 이벤트

 focus

 해당 요소가 포커스되었을 때 발생

 focusin

 해당 요소가 포커스되었을 때 발생하지만 focus 와의 차이는 focus 이벤트보다 먼저 발생한다.( focusin은 focus에 진입되는 순간, focus 완료되는 순간 focus 이벤트)

 blur

 해당 요소의 포커스가 빠져나갔을 때 발생

 focusout

 해당 요소의 포커스가 빠져나갔을 때 발생하지만 blur 와의 차이는 blur 이벤트보다 먼저 발생한다.


* document/window 이벤트의 종류


document/window 이벤트 

설명 

 load

 로딩이 완료되었을 때의 이벤트

 resize

 크기가 변경되었을 때의 이벤트

 scroll

 스크롤이 변경되었을 때의 이벤트

 unload

 종료시 발생하는 이벤트




아래에서 발생되는 간단한 발생이벤트 및 순서를 테스트해보도록 하자.
(그려진 큰박스/작은박에 마우스 이동 또는 클릭을 해보자. 또는 그 하단의 textbox 에 focusing 을 해보도록 하자)


* 이벤트 테스트

큰박스
작은박스
발생이벤트




* 이벤트 테스트에 바인딩한 이벤트

 태그

 이벤트

 큰박스/작은박스
  • mouseenter
  • mouseleave
  • click
  • dblclick

 텍스트박스
  • focus
  • blur
  • focusin
  • focusout
  • keydown
  • keypress
  • keyup


저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 6  (0) 2014.12.16
[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24

이번에는 셀렉터에 대해 알아보도록 하자.

셀렉터는 해당 요소를 선택하기 위한 선택자이다. 정규식처럼 약속된 구문에 의해 해당하는 요소를 선택하여 반환해 준다.


제이쿼리의 셀렉터는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 사용하고 있다.

기본적으로 css 의 셀렉터를 생각하면 된다.


기본 흐름은 다음과 같다.




셀렉터의 검색엔진을 통해 해당 요소를 검색하고 jquery 구문의 action 이 실행된다. 검색된 요소가 없다면 aciton 이 실행되지 않는다. 


가장 많이 사용하는 기본 셀렉터는 다음과 같다.

  • 태그이름
  • # + id 이름
  • . + 클래스이름


셀렉터 예시


 예시

설명

 $("*")

 모든 요소

 $(this)

 객체 자신에 대한 요소

 $("span")

 해당 span 태그에 대한 요소

 $("#deviceID")

 해당 id 를 포함한 요소

 $("p,span")

 p 태그와 span 태그  요소

 $("p.title")

 해당하는 p 태그 중 해당 클래스를 포함한 요소

 $("ul li:first")

 첫번째 ul 태그의 첫번째 li 에 대한 요소

 $("ul li:first-child")

 모든 ui 태그의 첫번째 li 에 대한 요소

 $("[name]")

 속성 name 을 가진 모든 요소

 $("tr:even")

 tr 태그중 짝수번째 요소

 $("tr:odd")

 tr 태그중 홀수번째 요소

 $("tr:eq(5)")

 tr 태그중 5번째 요소

 $(":disabled")

 속성 tag 중 disabled 된 모든 요소



아래의 창에서 간단히 확인이 가능하다.

좌측의 셀렉터를 클릭하면 해당하는 태그들이 선택이 된다.


 테스트(해당문구클릭)

 확인창
  • $("*")
  • $("p")
  • $("p,span")
  • $(".title")
  • $("tr:even")
  • $("tr:odd")
  • $("tr:eq(2)")
  • $("p:last")
  • $(":text")

<span>span태그</span>

<p>p태그</p>

<p class="title">p태그</p>

<table>

<tr><td>0</td></tr>

<tr><td>1</td></tr>

<tr><td>2</td></tr>

<tr><td>3</td></tr>

</table>

  

<p> p태그 마지막 </p>


저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

지난 강습에는 jquery 의 기본 설정 및 로딩 이벤트를 바인딩하는 법에 대해 간단히 다루었다.


이번에는 클릭이벤트를 다는 법~에 대해 간단히 다루어 보도록 하겠다.



jquery 기본 syntax>

$(셀렉터).action()


$(document).ready(function(){});


지난 시간 이 구문도 같은 원리이다. document 가 로드되어 dom 을 사용할수 있게 되었을때 function 안에 구문이 동작하라는 의미이다.


click event syntax>

$(셀렉터).click(실행될 function) 


위와 같은 방식으로 클릭 이벤트를 해당 객체에 바인딩할 수 있다.

단~ 지난번 내용인 로딩 이벤트 안 또는 다른 이벤트 실행 이후에 바인딩해야 한다.

이유는 스크립트는 컴파일이 미리 되어있지 않은 언어이기 때문에 순차적으로 실행한다.


로딩 이벤트에 처리 안했다면 다음과 같은 상황이 된다.



코드로는 다음과 같다.


방법 A.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

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

               alert("버튼 클릭");

        });

</script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

</html>


방법 B.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

<script type="text/javascript">

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

               alert("버튼 클릭");

        });

</script>

</html>


방법 A 의 경우에는 script 동작 시점에 버튼을 찾지 못했기 때문에 바인딩할 요소가 없어서 이벤트가 바인딩 되지 않는다.

방법 B 의 경우는 button 객체 생성이후이기 때문에 바인딩이 된다.


이러한 차이가 없이 프로그래밍하기 위해서는 로딩완료 시점에 바인딩을 해주면 된다.


$(function(){

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

     alert("버튼 클릭");

});

});


여기서 또 하나~!

버튼을 선택하기 위해서 #clickBtn 을 사용하였는데 이를 셀렉터라고 한다.

우선 이번에는 간단히 이야기하자면

# 을 붙이면 id 를 가르킨다.

즉 clickBtn 이라는 id 를 가진 요소에 이벤트를 달았다고 생각하면 된다.


다음 장에서는 셀렉터에 대해 이야기 하도록 해보자.



저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21



제이쿼리(Jquery) 란?


제이쿼리(jquery)는 자바스크립트로 된 프레임웍으로 프로그래머의 브라우져별 자바스크립트의 api 차이를 고려할 필요없이 동일한 코드의 작성을 지원하며, 자바스크립트의 코딩을 단순화 하였다.


즉 간단히 제이쿼리는 자바스크립트를 편리하게 사용하게 해주는 라이브러리 정도로 생각하면 된다．




자 그럼 jquery를 사용하기 위해서는 어떻게 해야하는가？

 

１．Jquery 의 CDN 주소로 포함시킨다．


      CDN 은 Contents Delivery Network 의 약자. 간단히 외부서버에서 제공하는 jquery를 include 시킨다고 생각하면 된다.


자바스크립트 라이브러리들의 cdn 주소를 확인하는 사이트 : https://cdnjs.com/



jquery 홈페이지에서 cdn 주소확인 : http://jquery.com/download/

 


 

다음의 구문을 소스에 포함시킨다.


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


따라서 우리는 위와 같이 jquery를 포함 시킬 것이다.(cdn 으로 jquery 를 제공하는 곳은 많기 때문에 꼭 위와 동일하지 않아도 된다)



 

2. 해당 시스템 또는 로컬 서버에 해당파일은 포함시키고 해당 주소를 작성 화면에 포함 시킨다．


http://jquery.com/download/ 에서 해당 jquery 다운로드 받고 로컬서버등에 위치시킨다.

 

<script src="jquery 파일의 주소"></script>

 

 


자 간단하게 cdn으로 jquery를 실행해 보자．



소스는 다음과 같다．


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        jQuery(document).ready(function() {

               alert("hello jquery");

        })

</script>

</head>

<body>

</body>

</html>


hello jquery 라는 alert 창이 떳다면 정상 작동한 것이다.



이것을 자바스크립트로 구현하면 다음과 같다.


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>javascript</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        function init(){

               alert("hello javascript");

        }

</script>

</head>

<body onload="init()">

</body>

</html>



둘 예시는 화면이 로드되는 시점에 alert의 내용을 도시하는 내용이다.


jquery 의 ready 이벤트는 다음과 같이 축약이 가능하다. 


방식 1.

jQuery(document).ready(function() {

        alert("hello jquery");

})；


방식 2. jQuery 를 $ 로 축약( jQuery  = $  동일하게 사용이 가능하다)

＄(document).ready(function() {

        alert("hello jquery");

})；


방식 3. ready 생략

＄(function() {

        alert("hello jquery");

})；


3가지의 결과는 동일하게 나온다.


첫강 끝~

저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

+ Recent posts

티스토리툴바