我们已经知道在XUL中,像按钮这样的元素可以通过连接到command元素来响应事件,这样做的一个好处就是实现了界面与脚本的分离。如果有多个界面元素需要响应相同的事件,比如,在日常开发中,我们经常会让某个菜单项、工具栏按钮和快捷键响应同一样事件,我们可以定义一个command元素,在该元素中指定oncommand属性为处理事件的函数,然后将这些需要响应这一相同事件的所有元素添加command属性,并将其值指定为command元素的id,如下所示:
<command id&#61;"cmd_sayhello" label&#61;"Say Hello" oncommand&#61;"alert(&#39;Hello&#39;)" />
<keyset><key id&#61;"key_sayhello" key&#61;"j" modifiers&#61;"control shift" command&#61;"cmd_sayhello" />
keyset>
<hbox><button id&#61;"btn_sayhello" command&#61;"cmd_sayhello" /><button type&#61;"menu" label&#61;"File"><menupopup><menuitem command&#61;"cmd_sayhello" />menupopup><button><checkbox command&#61;"cmd_sayhello" />
hbox>
上述代码段中定义了一个command元素&#xff0c;其中oncommand属性指定了响应命令的代码&#xff0c;接着定义了一个快捷键、一个普通按钮、一个菜单按钮和一个复选框&#xff0c;并都指定command属性为command元素的id&#xff0c;即cmd_sayhello。所以所有这些元素的命令响应都是弹出一个消息框并显示Hello。另外&#xff0c;command的元素除了id元素的所有属性都被这些元素所共享。在上述代码中&#xff0c;并没有指定按钮和菜单等的文本&#xff0c;但它们都统一继承了command元素的label属性&#xff0c;所以它们的文本显示都为Say Hello。如果将command元素的disabled属性设置为true&#xff0c;则所有与它连接的XUL元素都自动无效&#xff0c;即拥有了相同的disabled属性。
与command元素非常类似的一个元素是broadcaster&#xff0c;broadcaster元素也用于属性值的传递&#xff0c;两者的不同之处在于&#xff1a;command元素主要应用定义动作(action)&#xff0c;而broadcaster则用于在定义状态(state)。broadcaster元素被定义在broadcasterset元素中&#xff0c;类似于key元素被定义在keyset元素中一样。通过为broadcaster元素指定id以使它能够被其它元素引用。
observer是需要监视broadcaster状态的元素。如果某元素希望成为某个broadcaster的观察者&#xff0c;仅仅需要为它添加observes属性&#xff0c;并将该属性值指定为需要监视的broadcaster元素的id即可。最简单的情况如下所示&#xff1a;
<broadcasterset><broadcaster id&#61;"isOffline" label&#61;"Offline"/>
broadcasterset>
<button id&#61;"offline_button" observes&#61;"isOffline"/>
在该代码块中&#xff0c;id为offline_button的按钮元素成为了id为isOffline的broadcaster元素的观察者&#xff0c;所以该按钮也拥有了标签文本"Offline"&#xff0c;如果任何脚本改变了broadcaster中的label值&#xff0c;按钮中的标签文本也会跟着改变。
你可以为同一个broadcaster添加任意多个观察者&#xff0c;不过最好是多于一个&#xff0c;不然也失去了broadcaster元素的使用意义。默认情况下它监视broadcaster的除id和persist的所有属性&#xff0c;并在这些属性值发生改变时进行自身状态更新。如果需要监视指定的属性&#xff0c;则可以通过observers元素来实现&#xff0c;如下所示&#xff1a;
<broadcasterset><broadcaster id&#61;"colorChanger" style&#61;"color: black"/>
broadcasterset><button label&#61;"Test"><observes element&#61;"colorChanger" attribute&#61;"style" onbroadcast&#61;"alert(&#39;Color changed&#39;);"/>
button><button label&#61;"Observer"oncommand&#61;"document.getElementById(&#39;colorChanger&#39;).setAttribute(&#39;style&#39;,&#39;color: red&#39;);"
/>
observes元素被置于观察者的标签之内&#xff08;成为了它的子元素&#xff09;&#xff0c;
实际上&#xff0c;任何元素都可以成为一个broadcaster&#xff0c;并通过observers属性来引用。如果需要引用多于一个的属性&#xff0c;则在button元素中再添加一个observes元素&#xff0c;并将attribute属性修改为需要观察的其他属性即可。
onbroadcast属性用来定义观察的属性发生改变时的响应事件。