@ktjs/core 0.13.0 → 0.13.2

package/dist/index.d.ts

@@ -16,6 +16,33 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -98,15 +125,25 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
+
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type KTComponent = (
   props: {
-    ref?: KTRef<HTMLElement>;
+    ref?: KTRef<KTHTMLElement>;
     children?: KTRawContent;
   } & KTAttribute &
     any
-) => HTMLElement | Promise<HTMLElement>;
+) => KTHTMLElement | Promise<KTHTMLElement> | any;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -123,7 +160,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -132,33 +169,6 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  */
 declare const h: H;
 
-type KTHTMLElement = HTMLElement & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
-};
-
-declare global {
-  namespace JSX {
-    type Element = KTHTMLElement;
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
-
 type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
 /**
  * @param tag html tag or function component
@@ -187,11 +197,11 @@ declare const jsxs: typeof jsx;
  */
 type ExtractComponentProps<T> = T extends (props: infer P) => any ? Omit<P, 'ref' | 'children'> : {};
 declare function KTAsync<T extends KTComponent>(props: {
-    ref?: KTRef<HTMLElement>;
-    skeleton?: HTMLElement;
+    ref?: KTRef<KTHTMLElement>;
+    skeleton?: KTHTMLElement;
     component: T;
     children?: KTRawContent;
-} & ExtractComponentProps<T>): HTMLElement;
+} & ExtractComponentProps<T>): KTHTMLElement;
 
 export { Fragment, KTAsync, h as createElement, h, jsx, jsxDEV, jsxs, ref };
 export type { EventHandler, HTMLTag, KTAttribute, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };

package/dist/index.iife.js

@@ -51,22 +51,22 @@ var __ktjs_core__ = (function (exports) {
     }
     const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-    function booleanHandler(element, key, value) {
+    const booleanHandler = (element, key, value) => {
         if (key in element) {
             element[key] = !!value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
-    function valueHandler(element, key, value) {
+    };
+    const valueHandler = (element, key, value) => {
         if (key in element) {
             element[key] = value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
+    };
     // Attribute handlers map for optimized lookup
     const handlers = {
         checked: booleanHandler,
@@ -89,13 +89,18 @@ var __ktjs_core__ = (function (exports) {
         muted: booleanHandler,
         defer: booleanHandler,
         async: booleanHandler,
-        hidden: function (element, _key, value) {
-            element.hidden = !!value;
-        },
+        hidden: (element, _key, value) => (element.hidden = !!value),
     };
-    const defaultHandler = function (element, key, value) {
-        return element.setAttribute(key, value);
+    const ktEventHandlers = {
+        'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+        'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+        'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+        'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+        'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+        'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
     };
+
+    const defaultHandler = (element, key, value) => element.setAttribute(key, value);
     function attrIsObject(element, attr) {
         const classValue = attr.class;
         const style = attr.style;
@@ -115,11 +120,19 @@ var __ktjs_core__ = (function (exports) {
             delete attr.style;
         }
         const keys = $keys(attr);
+        // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
         for (let i = keys.length - 1; i >= 0; i--) {
             const key = keys[i];
             const o = attr[key];
             // force register on:xxx as an event handler
             // !if o is not valid, the throwing job will be done by `on`, not kt.js
+            // # special handling for kt.js specific events
+            const ktEvent = ktEventHandlers[key];
+            if (ktEvent) {
+                ktEvent(element, o);
+                continue;
+            }
+            // # normal event handler
             if (key.startsWith('on:')) {
                 element.addEventListener(key.slice(3), o); // chop off the `@`
                 continue;
@@ -206,7 +219,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+     * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.legacy.js

@@ -61,22 +61,22 @@ var __ktjs_core__ = (function (exports) {
         return typeof o === 'object' && o !== null && typeof o.then === 'function';
     };
 
-    function booleanHandler(element, key, value) {
+    var booleanHandler = function (element, key, value) {
         if (key in element) {
             element[key] = !!value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
-    function valueHandler(element, key, value) {
+    };
+    var valueHandler = function (element, key, value) {
         if (key in element) {
             element[key] = value;
         }
         else {
             element.setAttribute(key, value);
         }
-    }
+    };
     // Attribute handlers map for optimized lookup
     var handlers = {
         checked: booleanHandler,
@@ -99,13 +99,30 @@ var __ktjs_core__ = (function (exports) {
         muted: booleanHandler,
         defer: booleanHandler,
         async: booleanHandler,
-        hidden: function (element, _key, value) {
-            element.hidden = !!value;
-        },
+        hidden: function (element, _key, value) { return (element.hidden = !!value); },
     };
-    var defaultHandler = function (element, key, value) {
-        return element.setAttribute(key, value);
+    var ktEventHandlers = {
+        'on:ktchange': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(element.value); });
+        },
+        'ontrim:ktchange': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(element.value.trim()); });
+        },
+        'on:ktchangenumber': function (element, handler) {
+            return element.addEventListener('change', function () { return handler(Number(element.value)); });
+        },
+        'on:ktinput': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(element.value); });
+        },
+        'ontrim:ktinput': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(element.value.trim()); });
+        },
+        'on:ktinputnumber': function (element, handler) {
+            return element.addEventListener('input', function () { return handler(Number(element.value)); });
+        },
     };
+
+    var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
     function attrIsObject(element, attr) {
         var classValue = attr.class;
         var style = attr.style;
@@ -125,11 +142,19 @@ var __ktjs_core__ = (function (exports) {
             delete attr.style;
         }
         var keys = $keys(attr);
+        // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
         for (var i = keys.length - 1; i >= 0; i--) {
             var key = keys[i];
             var o = attr[key];
             // force register on:xxx as an event handler
             // !if o is not valid, the throwing job will be done by `on`, not kt.js
+            // # special handling for kt.js specific events
+            var ktEvent = ktEventHandlers[key];
+            if (ktEvent) {
+                ktEvent(element, o);
+                continue;
+            }
+            // # normal event handler
             if (key.startsWith('on:')) {
                 element.addEventListener(key.slice(3), o); // chop off the `@`
                 continue;
@@ -219,7 +244,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+     * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.mjs

@@ -48,22 +48,22 @@ if (typeof Promise === 'undefined') {
 }
 const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-function booleanHandler(element, key, value) {
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -86,13 +86,18 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
     const style = attr.style;
@@ -112,11 +117,19 @@ function attrIsObject(element, attr) {
         delete attr.style;
     }
     const keys = $keys(attr);
+    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
     for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -203,7 +216,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.d.ts

@@ -16,6 +16,33 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -92,34 +119,17 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
 
-type KTHTMLElement = HTMLElement & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
 };
 
-declare global {
-  namespace JSX {
-    type Element = KTHTMLElement;
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -136,7 +146,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -48,22 +48,22 @@ if (typeof Promise === 'undefined') {
 }
 const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-function booleanHandler(element, key, value) {
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -86,13 +86,18 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
     const style = attr.style;
@@ -112,11 +117,19 @@ function attrIsObject(element, attr) {
         delete attr.style;
     }
     const keys = $keys(attr);
+    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
     for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -203,7 +216,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.d.ts

@@ -10,6 +10,33 @@ interface KTRef<T> {
     isKT: true;
 }
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -86,34 +113,17 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
 
-type KTHTMLElement = HTMLElement & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
 };
 
-declare global {
-  namespace JSX {
-    type Element = KTHTMLElement;
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -130,7 +140,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -48,22 +48,22 @@ if (typeof Promise === 'undefined') {
 }
 const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
 
-function booleanHandler(element, key, value) {
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -86,13 +86,18 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
     const classValue = attr.class;
     const style = attr.style;
@@ -112,11 +117,19 @@ function attrIsObject(element, attr) {
         delete attr.style;
     }
     const keys = $keys(attr);
+    // todo 这里的处理每次遍历都要if所有的情况，能否用map或者对象来优化？
     for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -203,7 +216,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.13.2 (Last Update: 2026.01.16 19:38:40.621)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",