2007年7月30日星期一

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

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

galeki posted @ 2007年06月03日 02:50PM in Firefox扩展开发 with tags 扩展开发 event XUL firefox
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.    
  7. <script >
  8. function ShowMouseXY(event){
  9.   var document_xy = "X:" + event.clientX + " Y:" + event.clientY;
  10.   var screen_xy = "X:" + event.screenX + " Y:" + event.screenY;
  11.   document.getElementById("document").value = "鼠标在文档中的位置:  " + document_xy;
  12.   document.getElementById("screen").value = "鼠标在屏幕中的位置:  " + screen_xy;
  13. }
  14. </script >
  15.  
  16. <hbox >
  17.     <label id="screen"/>
  18.     <label id="document"/>
  19. </hbox >
  20. <hbox width="800" height="600" onmousemove="ShowMouseXY(event);"/>
  21.  
  22. </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. <script >
  7.     function who_am_i(event)
  8.     {
  9.         message = "我是" + event.currentTarget.tagName + "。你点击了" + event.target.tagName;
  10.         alert(message);
  11.     }
  12. </script >
  13. <vbox oncommand="who_am_i(event)">
  14.   <button label="OK"/>
  15.   <checkbox label="Save backup"/>
  16. </vbox >
  17.  
  18. </window >

 显示效果:

 

关于event更多的属性,可以参考 http://xulplanet.com/references/objref/Event.html



--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

没有评论: