~~~ .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! 元素大小发生改变时触发