Wijmo 와 HTML 이벤트

HTML5는 HTML 요소로는 작동하지만 컨트롤 및 컬렉션과 같은 임의의 이벤트 객체를 추가하는 데 사용할 수 없는 메커니즘을 가지고 있습니다.

이 때문에 Wijmo에서는 모든 Wijmo 클래스의 모든 이벤트를 구현하는 데 사용되는 Event 클래스를 정의합니다. Wijmo와 HTML 이벤트의 주요 차이점은 다음과 같습니다.

1. Wijmo 이벤트는 HTML 요소 뿐만 아니라 모든 클래스에서 선언 할 수 있습니다.
2. Wijmo 이벤트는 라우팅 (캡쳐 및 버블링)이 없기 때문에 HTML 이벤트 보다 가볍습니다. 이벤트를 선언한 객체만 대상으로합니다.
3. HTML 이벤트에서 사용되는 addEventListener 및 removeEventListner 메서드와 달리 이벤트의 addHandler 및 removeHandler 메서드를 호출하여 Wijmo 이벤트 처리기를 추가 및 제거 할 수 있습니다.
4. 모든 Wijmo 이벤트 처리기는 (a) 이벤트 발신자와 (b) 이벤트 인수의 두 가지 매개 변수를 사용합니다.
5. Wijmo는 이벤트 "XYZ"가 상응하는 메소드 "onXYZ"에 의해 발생되는 패턴을 따르며, 핸들러를 부착하지 않거나 이벤트를 사용자 정의하거나 심지어 정의하지 않고 이벤트를 처리하는 파생 클래스에 의해 대체 될 수 있습니다.

Wijmo 이벤트는 HTML 이벤트를 대체하지 않습니다. 응용 프로그램은 일반적으로 둘 다 사용합니다. HTML 이벤트는 컨트롤의 hostElement 또는 컨트롤 템플릿에 정의된 요소를 대상으로 하는 마우스 및 키보드 상호 작용을 처리하는 데 사용됩니다. Wijmo 이벤트는 DOM과 직접 관련이 없는 컨트롤 관련 이벤트를 처리하는 데 사용됩니다. 예 : valueChanged 또는 rowAdded.

아래 예제는 일반 JavaScript를 사용하여 InputNumber 컨트롤의 HTML 및 Wijmo 이벤트에 핸들러를 추가하는 방법을 보여줍니다.

import { InputNumber } from "@grapecity/wijmo.input";

// 컨트롤 생성
let ctl = new InputNumber("#inputNumber");

// Wijmo 이벤트 핸들러에 추가
ctl.valueChanged.addHandler(function (s, e) {
  console.log("the value has changed to " + s.value);
});

// HTML 이벤트 핸들러에 추가
ctl.addEventListener(ctl.hostElement, "keypress", function (e) {
  console.log("you pressed " + e.charCode);
});

위의 예는 일반 JavaScript를 사용하는 구문을 보여줍니다. Angular, React, Aurelia 또는 Vue와 같은 프레임 워크를 사용하는 응용 프로그램은 프레임워크에서 지시된 구문을 사용해야합니다.

예를 들어, Angular 1.x는 valueChanged Wijmo 이벤트에 다음과 같이 핸들러를 연결합니다.

<wj-input-number value-changed="myValueChangedEventHander(s, e)"
  >...</wj-input-number
>

Angular2에서는 다음과 같이 대신 할 수 있습니다.

<wj-input-number
  #theControl
  (value-changed)="myValueChangedEventHander(theControl, $event)"
  >...</wj-input-number
>