概述
本 Demo 展示了如何监听浮动对象的事件。Demo 创建了一个包含按钮的浮动对象，并通过监听 FloatingObjectSelectionChanged 和 FloatingObjectChanged 两个事件，在右侧文本区域实时显示事件的触发信息。
实现思路
创建浮动对象并设置其位置和大小
为浮动对象设置内容（一个按钮元素）
将浮动对象添加到工作表中
绑定 FloatingObjectSelectionChanged 事件，监听选择状态的变化
绑定 FloatingObjectChanged 事件，监听浮动对象属性的变化
在事件回调中将事件信息显示在文本区域中
代码解析
创建浮动对象
这段代码创建了一个名为 "f1" 的浮动对象，并设置了其起始和结束的行列位置。
设置浮动对象内容
通过 content() 方法为浮动对象设置了一个按钮元素作为其显示内容。
监听浮动对象选择变化事件
当浮动对象的选择状态发生变化时触发此事件，args.floatingObject 可以获取触发事件的浮动对象实例。
监听浮动对象属性变化事件
当浮动对象的任何属性发生变化时触发此事件，args.propertyName 可以获取发生变化的具体属性名称。
运行效果
页面加载后，工作表中会显示一个绿色的按钮浮动对象
点击浮动对象时，右侧文本区域会显示 FloatingObjectSelectionChanged 事件信息
拖动或调整浮动对象大小时，右侧文本区域会显示 FloatingObjectChanged 事件信息，包含具体变化的属性名称
所有事件信息都会追加显示在文本区域中，方便查看事件触发顺序
API 参考
FloatingObjectSelectionChanged 事件
当浮动对象的选择状态发生变化时触发。
FloatingObjectChanged 事件
当浮动对象的任何属性发生变化时触发，可通过 propertyName 参数获取具体变化的属性。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(3);
customFloatingObject.endRow(4);
var btn = document.createElement('button');
btn.style.width = "125px";
btn.style.height = "60px";
btn.style.background = "#82bc00";
btn.style.color = "white";
btn.style.textAlign = "center";
btn.style.border = "none";
btn.innerText = "Button";
customFloatingObject.content(btn);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
var floatingObjectEvent = document.getElementById('floatingObjectEvent');
sheet.bind(spreadNS.Events.FloatingObjectSelectionChanged, function (e, args) {
var text = floatingObjectEvent.value;
if (text !== "") {
text += '\n';
}
floatingObjectEvent.value = text + "\n" + "Event:FloatingObjectSelectionChanged" + "\n" + "FloatingObject " + args.floatingObject.name() + "\n";
});
sheet.bind(spreadNS.Events.FloatingObjectChanged, function (e, args) {
var text = floatingObjectEvent.value;
if (text !== "") {
text += '\n';
}
floatingObjectEvent.value = text + "Event:FloatingObjectChanged" + "\n" + "FloatingObject " + args.floatingObject.name() + " " + args.propertyName + "\n";
});
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<textarea id="floatingObjectEvent" style="width: 95%; height: 90px"></textarea>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
