# 事件

H5DW和Html其它控件一样，都支持事件，开发人员可以通过订阅和取消订阅来处理事件。

H5DW的主要事件和PowerBuilder数据窗口事件一致，熟悉PB开发人员可以快速上手。

# 订阅和取消

H5DW支持订阅和取消订阅事件

# 订阅事件

H5DW通过on方法订阅事件，参数为事件名称和事件处理函数

dw.on('ItemChanged', function (evt, row, col, value) {
    console.log('ItemChanged', row ,value);
})

# 取消订阅

H5DW通过off方法取消订阅事件，参数为事件名称和事件处理函数。

如果事件处理函数为空，则取消所有订阅的事件

const fchange = function (evt, row, col, value) {
    console.log('ItemChanged', row ,value);
}
dw.on('ItemChanged', fchange)；

dw.off('ItemChanged', fchange)；    //取消ItemChanged事件的fchange处理函数

dw.off('ItemChanged')； //取消订阅ItemChanged事件的所有的处理函数

# 事件列表

H5DW事件包含数据窗口的主要事件，并进行了一些扩展，包括以下

# ItemChanged

用户编辑数据后，数据项发生变化后触发

参数名称	说明
evt	事件源等信息的事件对象，包括了cell,行号，列号，列名称等信息
row	行号,从1开始
dwo	cell对象
value	更改后的数据

dw1.on('ItemChanged', (evt,row, dwo, value) => {
   console.log(row, dwo.name, value);
});

# EditChanged

用户编辑数据时，编辑框数据第改变时触发

参数名称	说明
evt	事件源等信息的事件对象，包括了cell,行号，列号，列名称等信息
row	行号,从1开始
dwo	cell对象
value	更改后的数据

dw1.on('EditChanged', (evt,row, dwo, value) => {
   console.log(row, dwo.name, value);
});

# ItemFocusChanged

字段焦点发生变化时触发

参数名称	说明
evt	事件源等信息的事件对象，包括了dw对象，cell,行号，列号，列名称等信息
row	行号,从1开始
dwo	cell对象

dw1.on('EditChanged', (evt,row, dwo) => {
   console.log(row, dwo.name);
});

# RowFocusChanged

字段焦点发生变化时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象
row	行号,从1开始

dw1.on('RowFocusChanged', (evt,row) => {
   console.log(row);
});

# DataObjectChanged

数据对象发生变化时触发

例如：数据对象被赋值 dw.dataObject = dataobject;

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象

dw1.on('DataObjectChanged', (evt) => {
   console.log(this.dataObject);
});

# ButtonClicked

当字段控件类型为按钮时，用户点击按钮时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,cell
row	行号,从1开始
dwo	始终为0
name	按钮对象的名称

dw1.on('DataObjectChanged', (evt, row, dwo, name) => {
   console.log(row,name);
});

# Clicked

用户点击字段时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,cell，行号，列名称等信息
row	行号,从1开始
dwo	点击的cell对象

dw1.on('Clicked', (evt, row, dwo) => {
   console.log(row,dwo.name);
});

# DoubleClicked

用户双击字段时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,cell，行号，列名称等信息
row	行号,从1开始
dwo	点击的cell对象

dw1.on('DoubleClicked', (evt, row, dwo) => {
   console.log(row,dwo.name);
});

# RightButtonClicked

右键点击字段时触发

参数名称	说明
evt	事件源等信息的事件对象，和dom的右键点击事件对象一致
ri	行号
ci	列号

dw1.on('RightButtonClicked', (evt, ri, ci) => {
   console.log(ri, ci);
});

# DropDownSelected

用户选中下拉列表或下拉数据窗口时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,行号，值类型等信息{ dw, row, value, type: 'dropdowndw' }

dw1.on('DropDownSelected', (evt) => {
   console.log(evt.row, evt.value);
});

# ToolbarChanged

顶部工具栏按钮被点击时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,type，value。

dw1.on('ToolbarChanged', (evt) => {
    if (evt.type === 'save') {
        downFlie(dw1.dataObject);
    }
});

# Enter

用户输入回车键时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,dom的keydown事件对象

# KeyDown

用户输入按键时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象,dom的keydown事件对象，可以用来判断按键的状态，如evt.key === 'Tab'；evt.shiftKey
key	PB按键名称，例如：keyuparrow!。主要是方便代码转换时使用
flag	PB的参数flag, 1按下了shift, 2按下了ctrl, 3按下了shift + ctrl

dw1.on('LoseFocus', (evt, key, flag) => {
    console.log(evt.key);
    if (evt.key === 'Tab') {
        evt.preventDefault();
    }
    if (evt.shiftKey) {
        console.log('shift');
    }
    if (evt.ctrlKey) {
        console.log('ctrl');
    }
});

### LoseFocus
控件失去焦点时触发
参数名称|说明
---|---
evt|事件源等信息的事件对象，包括dw对象
```js
dw1.on('LoseFocus', (evt) => {
    console.log(evt.dw);
});

# Focus

控件获得焦点时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象

dw1.on('Focus', (evt) => {
    console.log(evt.dw);
});

# RowResized

行高度改变时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象，行号，行高，{ dw, row, rowHeight }

dw1.on('RowResized', (evt) => {
    console.log(evt.row, evt.rowHeight);
});

# ColResized

列宽度改变时触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象等信息。{ dw, col, colWidth }

dw1.on('ColResized', (evt) => {
    console.log(evt.col,evt.colWidth);
});

# CellRender

渲染单元格时触发。

出于性能考虑不是所有单元格渲染都会触发，目前只有PaintCell类型的单元格触发

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象等信息。evt = { view, cell, dw, draw };
row	行号
name	单元格名称
draw	绘制对象，可以调用其drawText等方法


function paintTest(evt, draw) {
    //npx是缩放函数, dpr()是比例函数，ctx相当于 canvas.getContext('2d')的值，可以调用绘制函数
    const { npx, dpr, DrawBox, ctx } = draw;
    // 单元格大小
    const { left, top, width, height } = evt.view;

    ctx.save();
    //长宽和坐标需要进行转换适应缩放,最后一定要restore()还原;
    ctx.scale(dpr(), dpr());
    ctx.beginPath();
    ctx.rect(left + 20, top + 40, 200, 80);
    ctx.closePath();
    ctx.strokeStyle = '#ff0000';
    ctx.fillStyle = "blue";
    ctx.stroke();
    ctx.fill();
    ctx.restore();
}

dw1.on('CellRender',(evt, row, name, draw) => {
    paintTest(evt, draw);
});

# LayoutViews

滚动等刷新时触发，重新计算单元格的位置

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象等信息。evt : { dw }

# CellLayout

刷新单元格时触发, 一般用于自定义单元格，创建html对象并定位到单元格中

参数名称	说明
evt	事件源等信息的事件对象，包括dw对象等信息。evt : {dw, ri, ci, parent, info}


function createButtons(views, evt) {
  const {dw, ri, ci, parent, info} = evt;
  const {rect} = info;
  const btns = document.createElement('div');
  btns.innerHTML = '<span><button>1</button><button>2</button></span>';
  parent.child(btns);
  const {left, top} = rect;
  btns.style['left'] = `${left}px`;
  btns.style['top'] = `${top}px`;
}

dwDB.on('CellLayout', (evt) => {
    const {dw, ri, ci, parent, info} = evt;
    if (ri === 0) {
        console.log('celllayout', ri, ci, JSON.stringify(info.rect));
        createButtons(views, evt);
    }
});

← 方法和属性服务端 →