ACE-T's JS_Part 02. Style과 Event 다루기!!

<< 이전 글 >>

2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??

ACE-T's JS_Part 02. Style과 Event 다루기!!

1) Style 다루기

    태그 엘리먼트에 Style 적용하는 방법은 2가지가 있습니다.

    - CSS 구문으로 다양한 스타일 속성을 구룹(선택자)으로 만들어 스타일을 적용하는 방법

      (내부/외부 스타일 정의 모두 포함)

    - 엘리먼트에 직접 스타일 속성을 작성하는 방법(인라인 스타일)

2) Event 다루기

   자바스크립트에서..이벤트 정말 중요하죠~!! ㅎㅎ;

   먼저 종류부터 알아보도록 하겠습니다!^-^

   (1) 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트

   (2) 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트

   (3) 엘리먼트 고유 이벤트 : 엘리먼트마다 발생하는 고유의 이벤트, 예로 <img>엘리먼트의 경우 이미지가 모두 로드되면

       onload 이벤트가 발생해서 이미지가 성공적으로 로드됐음을 알리며, input 엘리먼트의 경우 입력한 정보가 바뀌면    

       onchange 이벤트가 발생해서 입력 정보가 변경됐음을 알립니다.

   (4) 사용자 정의 이벤트 : 주로 개발자가 특정 기능을 수행하는 클래스를 만들고 어떤 작업이 끝났음을 사용자에게 

         알려줄 때  사용되는 이벤트 입니다.

  두번째로는 이벤트 단계에 대해서 알아보도록 하겠습니다!^-^

  이벤트는 크게 3단계에 걸쳐 발생 합니다.

  1) 캡처(Capture)단계

     - 가장 먼저 실행되는 단계로서, document에서 시작해 실제 이벤트를 발생시킨 타켓까지 이동 합니다. 

       이를 캡처링이라고 합니다. 이때 리스너가 등록돼 있다면 등록된 리스너가 바로 실행 됩니다.

  2) 타겟(Target)단계

     - 캡처 단계를 거쳐 실제 이벤트를 발생시킨 타켓에 도착한 상태를 말합니다.

  3) 버블(Bubble)단계

     - 타겟 단계까지 오면 이벤트 흐름은 다시 타겟 단계의 역순으로 움직이기 시작합니다. 이 흐름을 버블링이라고 합니다.

  위의 이벤트 단계에 대해서는 따로 정리를 해둘 필요가 있을 것 같네요. 여기에서는 요기까지만!~

실습을 해보도록 하겠습니다.

1) 리스너 추가하기

     ex_01) DOM Level 0 방식

ex_02) DOM Level 1 방식 : node.js에서도 많이 사용되고 있는 방식이군요!

result> 결과는 ex_01, ex_02 둘다 같은 alert결과이기에 한번만 작성하겠습니다.

click 하였을때의 결과 -일반 함수를 이벤트 리스너로 사용하는 경우

마우스 오버 하였을 때의 결과 - 임의의 함수를 이벤트 리스너로 사용하는 경우

최종 소스 : 

addListener.html

2) 리스너 삭제하기

   등록된 리스너 가운데 사용하지 않는 리스너는 삭제해야 합니다. 

   리스너를 삭제하는 방법 역시 이벤트를 추가할 때처럼 두가지 방식이 있습니다.

   a. DOM Level 0 방식

      ex) 이벤트 리스너를 btn_1.onClick=on_Click처럼 설정 했다면

            이벤트 삭제는 btn_1.onClick=null;

  b. DOM Level 2 방식

      ex) 이벤트 리스너를 btn_1.addEventListener("click", on_click, false)로 등록했다면 

            btn_1.removeEventListener("click", on_click, false); 로 해서 제거할 수 있습니다.

            단, 익명 함수를 만들어서 사용한 경우는 제거할 수 없습니다!!

            또한, IE 9이하 버전에서는 removeEventListener 메소드 대신 detachEvent메소드를 사용해야 합니다.

3) 이벤트 발생 시키기

    btn_1을 눌러서 btn_2를 실행 시켜보는 이벤트! 즉, btn_2를 클릭하지 않았어도 클릭한 것처럼 만들 수 있습니다.

    1. document의 createEvent()를 이용해 발생시키려는 이벤트 객체를 생성

    2. 이벤트와 함께 담아서 보낼 데이터를 이벤트 객체에 추가

    3. 1번에서 생성한 이벤트 객체의 initEvent()를 호출해 이벤트를 초기화

    4. 생성한 이벤트 객체를 dispatchEvent()의 매개변수 값으로 전달해 실행

    <<소 스>>

결과

버튼 1을 눌렀을 때

버튼 2를 눌렀을 때

    

소스파일

eventGenerate.html

4) 사용자 정의 이벤트

  << 소스 >>

결과 

소스파일

userEventGenerate.html

이 내용을 토대로 뭔가 하나 만들어봐야겠네요^-^

P.S Will do!

     1) 이벤트 단계(캡쳐, 타켓, 버블) more Detail~

     2) about DOM Level 0 and 2

     3) 위의 내용을 토대로 하나 만들어보기!

       - END -