HTML5는 HTML 요소로는 작동하지만 컨트롤 및 컬렉션과 같은 임의의 이벤트 객체를 추가하는 데 사용할 수 없는 메커니즘을 가지고 있습니다.
이 때문에 Wijmo에서는 모든 Wijmo 클래스의 모든 이벤트를 구현하는 데 사용되는 Event 클래스를 정의합니다. Wijmo와 HTML 이벤트의 주요 차이점은 다음과 같습니다.
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
>