프로토 타입-이벤트 처리

이벤트 관리는 브라우저 간 스크립팅을 달성하기위한 가장 큰 과제 중 하나입니다. 모든 브라우저에는 키 입력을 처리하는 방법이 다릅니다.

Prototype Framework는 모든 브라우저 간 호환성 문제를 처리하고 이벤트 관리와 관련된 모든 문제를 방지합니다.

Prototype Framework는 모든 주요 브라우저에서 현재 이벤트 개체를 인수로 사용하고 요청하는 정보를 즐겁게 생성하는 메서드로 가득 찬 Event 네임 스페이스를 제공 합니다.

이벤트 네임 스페이스는 키보드 관련 이벤트와 함께 사용할 수있는 표준화 된 키 코드 목록도 제공합니다. 다음 상수는 네임 스페이스에 정의되어 있습니다-

S. 아니. 키 상수 및 설명
1.

KEY_BACKSPACE

백 스페이스 키를 나타냅니다.

2.

KEY_TAB

탭 키를 나타냅니다.

삼.

KEY_RETURN

반환 키를 나타냅니다.

4.

KEY_ESC

Esc 키를 나타냅니다.

5.

KEY_LEFT

왼쪽 키를 나타냅니다.

6.

KEY_UP

키를 나타냅니다.

7.

KEY_RIGHT

오른쪽 키를 나타냅니다.

8.

KEY_DOWN

다운 키를 나타냅니다.

9.

KEY_DELETE

삭제 키를 나타냅니다.

10.

KEY_HOME

홈 키를 나타냅니다.

11.

KEY_END

종료 키를 나타냅니다.

12.

KEY_PAGEUP

페이지 위로 키를 나타냅니다.

13.

KEY_PAGEDOWN

페이지 다운 키를 나타냅니다.

이벤트 처리 방법

시작하기 전에 이벤트 메서드를 사용하는 예를 살펴 보겠습니다. 이 예제는 이벤트가 발생한 DOM 요소를 캡처하는 방법을 보여줍니다.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

산출

다음은 관련된 모든 방법의 전체 목록입니다. Event. 가장 많이 사용하는 기능은 observe , elementstop 입니다.

프로토 타입 이벤트 방법

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. 요소()

이벤트가 발생한 DOM 요소를 반환합니다.

2. 넓히다()

Event.Methods에 포함 된 모든 메서드로 이벤트 를 확장합니다 .

삼. findElement ()

이벤트가 발생한 태그 이름에서 위쪽으로 지정된 태그 이름을 가진 첫 번째 DOM 요소를 반환합니다.

4. isLeftClick ()

버튼 관련 마우스 이벤트가 "왼쪽"(실제로 기본) 버튼에 관한 것인지 확인합니다.

5. 관찰 ()

DOM 요소에 이벤트 핸들러를 등록합니다.

6. pointerX ()

마우스 이벤트의 절대 수평 위치를 반환합니다.

7. pointerY ()

마우스 이벤트의 절대 수직 위치를 반환합니다.

8. 중지()

이벤트의 전파를 중지하고 기본 작업이 결국 트리거되지 않도록합니다.

9. stopObserving ()

이벤트 처리기를 등록 취소합니다.

10. unloadCache ()

관찰을 통해 등록 된 모든 이벤트 핸들러를 등록 해제합니다. 자동으로 연결됩니다. 1.6부터 사용할 수 없습니다.