JS与OCX控件事件交互实现指南

OCX与JS事件交互原理

JavaScript具备处理OCX控件事件的能力。当OCX控件内部发生预定义或自定义事件时，JS脚本能够捕获这些信号并执行相应的逻辑处理。

从机制上看，事件响应可以由OCX控件自身完成，也可以交由JS处理。这种机制赋予了JS直接响应OCX控件事件的能力，实现了控件与脚本之间的交互。

具体实现过程如下所示：

OCX控件端事件定义

第一步是在OCX控件内部添加自定义事件。虽然鼠标点击等预定义事件原理相似，但此处以自定义事件为例进行说明。

由于事件归属于窗口级别，需要在控件类（Ctrl类）上进行操作。具体做法是在该类上点击右键，选择“Add”菜单下的“Add Event”选项，如图所示操作。

在弹出的对话框中输入事件名称，例如“OnChange”。若需传递参数，需在此处设置参数信息，随后点击“完成”按钮。向导将自动生成相关代码框架。

// 事件映射宏定义
BEGIN_EVENT_MAP(CH_OcxCtrl, COleControl)
EVENT_CUSTOM_ID("OnChange", eventidChange, OnChange, VTS_NONE)
END_EVENT_MAP()

事件定义完成后，需要在OCX控件的某个函数中调用OnChange()方法来实际触发该事件。

至此，OCX控件端的事件定义工作已完成。

JavaScript端事件响应实现

接下来介绍如何在JS中响应上述事件，具体代码实现如下：

<script language="javascript" for="MyCtrl" event="OnChange()" type="text/javascript">
Call(); //此处可直接编写具体操作代码
</script>

其中“MyCtrl”是该OCX控件在当前页面中的对象ID（name属性理论上也可用，但未经验证），JS可通过该ID操作控件对象。

“OnChange()”对应OCX控件中定义的事件名称，HTML中声明的事件名必须与OCX控件中定义的名称严格一致。

若事件包含参数，当OCX触发事件时，会将参数传递给JS。例如事件定义有两个参数p1和p2，JS中应写为event=“OnChange(param1,param2)”，此时param1和param2将分别接收p1和p2的值，调用函数时可写为Call(param1,param2)。

<script type="text/javascript" Language=Javascript>
function Call(param1,param2)
{ 
alert(param1+param2); //具体业务操作代码
} 
</script>

本文编写较为匆忙，表述可能不够详尽，但核心思路如上，旨在供开发者参考备忘。