~~~ .item { hover-on! : ele = $1( input.url ) , ele:empty == true ? (self.value = "empty") # (self.value = "filled"), ele:hover = true, self::width = ele.box-content-width(), self.$(.icon) -> @(ele) ele::background = "#CCC" ; } ~~~ * hover-on! 是我們的腳本要處理的事件標識. 當具有 .item 類的元素被鼠標懸停時, 會觸發此事件并執行里面的代碼. 下面是完整的事件支持列表: * hover-on!/hover-off! 鼠標懸停/離開時觸發 * active-on!/active-off! 鼠標按下/抬起時觸發 * click! 鼠標單擊時觸發 * focus-on!/focus-off! 獲得/失去焦點時觸發 * key-on!/key-off! 鍵盤的按鍵按下/抬起時觸發 通過 key-code() 函數獲取按鍵信息. key-code() 獲得的按鍵信息可能是一個用單引號包含的有效字符('a', '4', '$')或是下列預定義值之一: 'RETURN', 'LEFT', 'RIGHT', 'UP', 'DOWN', 'PRIOR', 'NEXT', 'TAB', 'HOME', 'END', 'DELETE', 'INSERT', 'BACK' * assigned! 所屬的樣式被應用到元素上時觸發 * value-changed! 元素的值發生變化時觸發 * validate! 表單提交前的數據驗證事件 * timer! 定時觸發器 配合 start-timer(ms) 和 stop-timer() 函數使用. start-timer(ms) 中的參數單位為毫秒. * animation-start!/animation-step!/animation-end! 動畫控制事件 animation-start! 在調用了元素的 element.start-animation() 方法后觸發. animation-step! 事件處理的最后必須返回一個整數(下次執行的間隔毫秒數). 例如: return 500; 如果animation-step! 返回的是 return cancel; 則動畫中止, 同時觸發 animation-end! 事件. * size-changed! 元素大小發生改變時觸發