firefox扩展开发(五) ： 驱动XUL界面

firefox扩展开发(六) ： 关于event对象

galeki posted @ 2007年6月03日 14:50 in Firefox扩展开发 with tags firefox XUL 扩展开发 event , 5192 阅读
firefox扩展开发(七) ： 键盘快捷键

上一篇我们看到了如何用javascript驱动界面上的控件，现在我们看看在事件被触发时，如何获得更详细的信息。

每当某个事件被触发（比如控件被点击或激活、鼠标移动到控件上等等），有关这个事件的详细信息都被储存到event对象中，并可以在事件处理函数中进行查看，比如上一篇中的第二个例子，就是通过 event.target.tagName 获得被激活的控件的标签名称，event还有更多的属性，让我们看个例子：

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.    
  8. <script>
  9. function ShowMouseXY(event){
  10.   var document_xy = "X:" + event.clientX + " Y:" + event.clientY;
  11.   var screen_xy = "X:" + event.screenX + " Y:" + event.screenY;
  12.   document.getElementById("document").value = "鼠标在文档中的位置：  " + document_xy;
  13.   document.getElementById("screen").value = "鼠标在屏幕中的位置：  " + screen_xy;
  14. }
  15. </script>
  16.  
  17. <hbox>
  18.     <label id="screen"/>
  19.     <label id="document"/>
  20. </hbox>
  21. <hbox width="800" height="600" onmousemove="ShowMouseXY(event);"/>
  22.  
  23. </window>

这里用到了4个event中的属性，clientX、clientY、screenX、screenY，分别是事件触发时，鼠标相对文档的xy坐标值和相对整个屏幕的xy坐标值，第21行在hbox上设置了onmousemove的事件属性，每当鼠标在这个hbox上移动，就会触发函数显示当前鼠标的位置（鼠标没有被抓下来）:

 

上一篇的第二个例子，我们用event.target引用了当前被激活的控件，通过事件冒泡在vbox上识别，与其相对的，还有一个event.currentTarget属性，引用的是事件冒泡最终传递给的控件：

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7. <script>
  8.     function who_am_i(event)
  9.     {
  10.         message = "我是" + event.currentTarget.tagName + "。你点击了" + event.target.tagName;
  11.         alert(message);
  12.     }
  13. </script>
  14. <vbox oncommand="who_am_i(event)">
  15.   <button label="OK"/>
  16.   <checkbox label="Save backup"/>
  17. </vbox>
  18.  
  19. </window>

 显示效果：

 

关于event更多的属性，可以参考 http://xulplanet.com/references/objref/Event.html 已转移至 https://developer.mozilla.org/en/XUL

Trackback URI Small_feed 评论 (12)
1
回复
yidinghe 说:
2007年6月10日 11:06 太棒了，关注中。
2
回复
Avatar_small
galeki 说:
2007年6月14日 02:26

多谢关注！

近期有些忙，更新暂缓。

3
回复
Avatar_small
heartnn 说:
2008年12月04日 18:02

用HyperSnap截图，这样就不会发生菜单打开时不能截图和鼠标截不到的为题了

4
回复
Avatar_small
heartnn 说:
2008年12月04日 18:02

。。。忘了，楼主用的是linux，呵呵

5
回复
Avatar_small
galeki 说:
2008年12月06日 17:53

呵呵，现在用 gimp 那个截图功能，倒是可以解决这个问题～

6
回复
superx 说:
2009年3月28日 09:34

为什么xul里面一旦有中文，在firefox中就是乱码呢= =
标题写成<?xml version="1.0" encoding="UTF-8"?>也无济于事
我用windows和firefox3.5pre

7
回复
Avatar_small
galeki 说:
2009年3月29日 01:57

@superx: 必须得保证 xml 头声明的编码和你文件实际的编码一致，否则肯定会乱码。
windows 下编辑的中文文件一般是 gb 的编码，声明成 gb2132 试试看

8
回复
superx 说:
2009年4月05日 15:33

谢谢你哦，前几天我已经通过使用locale本地化文件解决了此问题，现在我也入道了，哈哈= =||

9
回复
superx 说:
2009年4月05日 15:34

另外xulplanet已经全面搬迁到MDC（mozilla开发者中心）了，文章末尾的连接是不是可以改一改了？嘿嘿……

10
回复
Avatar_small
galeki 说:
2009年4月10日 15:44

@superx: :D 恭喜哈~
多谢，已经改了~

11
回复
superx 说:
2009年4月12日 18:50

其实windows下乱码的问题,主要是由于字符编码问题产生的,但是切换xul文件编码并不十分有效,比较好的做法是建立locale目录进行label的本地化,而xul中所有标签都使用&符号指向locale文件夹中相应的语言文件,这样在windows下就正常了,另外博主能不能添加一点xpcom基础= =||这个我现在实在是啥都不会,那个xpcom怎么在windows下编译......

12
回复
Avatar_small
galeki 说:
2009年4月15日 08:43

@superx: 惭愧啊，一直没空，我也没看到 xpcom 那里 T_T


* 登录
*

simple_captcha.jpg
(输入验证码)