PropertyEvent
元素属性事件,leafer.ready
事件之后才会派发此事件。
事件派发的顺序为:元素自身、Leafer 实例,渲染生命周期 中会监听此事件。
事件名称
PropertyEvent.CHANGE
同时派发给元素自身、Leafer 实例。
property.change
PropertyEvent.LEAFER_CHANGE
只派发给 Leafer 实例自身。
property.leafer_change
关键属性
target: ILeaf
目标对象
attrName: string
属性名称。
oldValue: IValue
旧的值。
newValue: IValue
新的值。
继承
Event
示例
ts
import { Leafer, Rect, LeaferEvent, PropertyEvent } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)
function onReady() {
leafer.on(PropertyEvent.CHANGE, function (e: PropertyEvent) {
console.log('leafer', e.target, e.attrName, e.newValue, e.oldValue)
})
rect.on(PropertyEvent.CHANGE, function (e: PropertyEvent) {
console.log('leaf', e.target, e.attrName, e.newValue, e.oldValue)
})
rect.fill = 'blue'
}
leafer.on(LeaferEvent.READY, onReady)
js
import { Leafer, Rect, LeaferEvent, PropertyEvent } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)
function onReady() {
leafer.on(PropertyEvent.CHANGE, function (e) {
console.log('leafer', e.target, e.attrName, e.newValue, e.oldValue)
})
rect.on(PropertyEvent.CHANGE, function (e) {
console.log('leaf', e.target, e.attrName, e.newValue, e.oldValue)
})
rect.fill = 'blue'
}
leafer.on(LeaferEvent.READY, onReady)