MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

其他事件处理器

更多关于事件处理

 

 

« Previous Next »

  

 

    在这一章,详细讨论事件对象,并引入一些新事件。

事件对象

Edit section

    每一个事件处理函数都包含一个保存这事件( event )对象的参数。在以属性的发生添加的事件监听器里也有一个隐含的事件对象(event)被当作参数传递到事件监听器中。在 addEventListener 的形式中,事件监听器的第一个参数就是事件对象。实践大学有一系列的属性,完整列表参见  reference

    我们已经在上一章知道了target 属性,它保存这产生事件元素的一个引用。一个相似的 currentTarget 属性当前处理此事件的元素,下面的例子 currentTarget 总是 vbox,而 target 可能是不同的元素, button 或 checkbox。

Example 1  : Source View

<vbox oncommand="alert(event.currentTarget.tagName);">
  <button label="OK"/>
  <checkbox label="Show images"/>
</vbox>

停止事件传播

Edit section

    一旦你处理一个事件,无论事件传播到什么程度,你都希望停止事件继续向下传播。因为添加事件监听器的方式不同有以下两种方式停止事件传播。

    由于路由阶段先于返回阶段发生所以路由监听器会先于返回监听器触发。如果路由阶段停止事件传播,那么其后的路由监听器及所有返回监听器都不会触发。手动停止事件对象传播使用 stopPropagation 方法,如下例。

Example 2  : Source View

<hbox id="outerbox">
  <button id="okbutton" label="OK"/>
</hbox>

<script>
function buttonPressed(event){
  alert('Button was pressed!');
}

function boxPressed(event){
  alert('Box was pressed!');
  event.stopPropagation();
}

var button = document.getElementById("okbutton");
button.addEventListener('command',buttonPressed,true);

var outerbox = document.getElementById("outerbox");
outerbox.addEventListener('command',boxPressed,true);
</script>

    这里分别在按钮和box上添加事件监听器,在调用box的监听器中使用了 stopPropagation 方法,因此按钮的监听器永远不会被调用。如果去掉此命令两个监听器的显示都会出现。

阻止默认响应

Edit section

    如果没有注册事件处理,那么当完成路由及返回后,元素会以一种默认的方式对事件作出响应。这种默认响应依赖于元素的定义。比如, 'popupshowing' 事件在快捷菜单显示之前被发送。默认的响应就是显示快捷菜单。如果默认的响应被阻止,那么快捷菜单就不会显示。默认的响应可以使用事件对象的 preventDefault 方法阻止,如下例。

Example 3  : Source View

<button label="Types" type="menu">
  <menupopup onpopupshowing="event.preventDefault();">
    <menuitem label="Glass"/>
    <menuitem label="Plastic"/>
  </menupopup>
</button>

     另一种方式, 对于以属性形式使用的可以在代码中直接返回 false 。 注意阻止默认响应不同于 stopPropagation 方法,即使默认响应被阻止,事件依然会传播下去。同样的,定义 stopPropagation 方法也不会阻止默认响应。如果需要,必须同时调用。

    注意一旦传播或默认调用被阻止,都不可恢复。

    下面的几章列出可能用到的一些事件,一个完整的列表在这里 XULPlanet event reference

鼠标事件

Edit section

    这里的一些事件用来描述鼠标动作,简单的描述如下:

click 
当鼠标键在一个元素上按下并释放后调用。
dblclick 
当鼠标双击时调用。
mousedown 
当鼠标键在一个元素上按下时调用,事件处理会被立即调用,甚至在鼠标键释放之前。
mouseup 
当鼠标键在一个元素上释放时调用。
mouseover 
当鼠标移动到一个元素之上时调用,你可以使用它来高亮显示该元素,然而CSS提供了一个方案自动实现它,所以你可能不会使用它,当然你也可以在状态栏显示一些提示信息。
mousemove 
当鼠标在一个元素上移动时调用,在移动过程中可能会多次调用事件处理,请务必避免冗长,复杂操作。
mouseout 
当指针移除元素时调用。你可以将该元素取消高亮或移除状态栏提示。

    也有一些与拖动相关的事件,当用户按下鼠标键并移动鼠标时产生,这一部分参见 Drag and Drop.

鼠标键事件属性

Edit section

    当一个鼠标键事件产生,一系列附件属性也随之产生用以描述哪个鼠标键被按下及鼠标指针的位置。事件的 button 可以用于确定哪个按键被按下。0 代表左键,1 代表中键 ,2代表右键。如果鼠标设置不同,值也不同。

    detail 保存着鼠标键被短时间内快速点击的次数。这允许你检查这是一次单击,双击还是三击。当然如果你希望检查双击你可以使用 dblclick 事件代替。一旦第一次点击开始 click 事件就会触发,第二次点击会再触发一次,第三次又一次。但 dblclick 事件仅在双击发生时触发。

     buttondetail 仅支持与鼠标键相关的事件,对鼠标移动事件无效。对于鼠标移动事件这两个值均为0。

鼠标位置事件属性

Edit section

    所以的鼠标事件都提供事件发生时鼠标的坐标位置。有两个坐标系统。其一是 screenXscreenY 属性他们是基于屏幕左上角的。另一个是 clientXclientY 他们是相对于文件左上角的。这里有一个显示当前鼠标位置的例子。

Example 4  : Source View

<script>

function updateMouseCoordinates(e){
  var text = "X:" + e.clientX + " Y:" + e.clientY;
  document.getElementById("xy").value = text;
}
</script>

<label id="xy"/>
<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>

    在这个例子里,box 的尺寸被准确设定,这样更容易看出结果。事件处理器得到 clientXclientY 属性并根据他们创建一个字符串。这个字符串又被设置成为 label.value 的值。注意事件对象必须作为参数传递给updateMouseCoordinates 函数。如果快速的在剥削的边缘上移动鼠标,你可能会发现坐标并不会准确的停到 400。这是因为 mousemove 事件触发的间隔取决于鼠标移动的速度。因为当鼠标移动过一段距离后新的事件才触发,因为发送鼠标每一像素的移动是十分没有效率的。

元素相关坐标

Edit section

    你经常想知道事件发生时对元素的坐标而非对于这个窗口。这时你可以使用减法来计算,示例如下。

var element = event.target;
var elementX = event.clientX - element.boxObject.x;
var elementY = event.clientY - element.boxObject.y;

      XUL 元素有一个 box 对象可以通过 boxObject 属性获得。在后一章我们会学习更多相关内容,但记住它保存着如何显示元素包括元素的x,y 位置。在这个例子中,这些坐标被从事件坐标中减去,这样就得到了事件相对于元素的坐标。

加载事件

Edit section

    一旦XUL文件加载完成 load 事件就会被发送到文件 ( window 标记),此时正是内容显示之前。这个事件通常被用于初始化操作及完成一些任务使得用户可以使用窗口。你可以通过调用一个顶层的脚本函数来使用这一事件处理以上这些事情。这是因为XUL文件为完全加载,一些事情可能会处理出错。使用 load 事件,在 window 标记处放置 onload 属性,调用处理加载事件的处理器来完成必要的界面初始化。

    也有unload 事件,它当窗口关闭时被调用,或者作为浏览器的内容时,页面换为另一URL 时调用。你可以使用这一事件保存任何改变的信息。


     接下来我们看看如何添加键盘快捷方式( keyboard shortcuts).

 

« Previous Next »

  

 

 

文档标签和贡献者

 此页面的贡献者: ziyunfei, alzhu
 最后编辑者: ziyunfei,