Essential Silverlight翻译连载---第五章续1-CSDN博客

事件侦听

第二种是使用代码的方法：使用事件侦听把一个事件处理赋给一个事件。您可以安排一段代码“侦听”是否有事件发生。如果发生了，将会进行适当地处理。声明事件处理的主要优势是很容易移除一个事件侦听。不利条件是事件侦听并非自动生成的，特别对于一些有很强的HTML背景的开发人员。但当您第一次使用它，并在程序中使用它根本不困难。

让我们开始一段XAML代码。正如您所见，并没有专门针对单击事件的事件处理属性。好，这有另外一个重要的事件： Loaded。一个元素只会触发一次 Loaded事件，如例5-5，整个XAML文件被完全载入后，我们使用这个事件建立实际的事件侦听。

例5-5 使用事件侦听，XAML 文件（MouseClickListener.xaml ）

< Canvas xmlns = "http://schemas.microsoft.com/client/2007"

xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

Loaded = "canvasLoaded">

< Rectangle Width = "200"Height="75"Stroke=" Orange "StrokeThickness="15" />

< TextBlock FontFamily = "Arial"FontSize="32"Canvas.Left="30"Canvas.Top="20"

Foreground = "Black"Text="Silverlight"

x:Name = "ClickTarget"/>

</ Canvas >

建立事件侦听

时间证明一切，我们来看看下面这段建立事件侦听的 JavaScript代码：

window.onload = function() {

// 这里建立事件侦听

}

当 HTML页面标记过完全载入时，页面的Load事件将会被触发一次。当然这并不代表所有相关文件包括JavaScript类库和XAML文件已经被完全载入。当在您的本地计算机上测试它时，它可能不会被执行，因为文件是从速度很快的硬盘上载入的。然而Internet可能会有严重的延迟，所以您不能依赖于这种方法。这也是为什么使用根元素的Loaded事件来初始化Silverlight应用程序并不常用的原因之一。

但现在对于事件侦听来说，首先你不得不寻找跟事件侦听关联的元素。在例5-5中我们应该注意到，<TextBlock>元素有一个名称属性（准确地说是 x ：Name，）。Silverlight的JavaScript API可以通过名称找到相应的元素，实现这个功能您只需要使用findName()方法，它支持XAML文件中的每个元素。

我们可以访问XAML中的元素。需要记住，事件处理方法自动接收一个sender的引用做为他们的第一个参数。所以我们可以使用sender和它的findName()方法来访问文本块：

function canvasLoaded(sender, eventArgs) {

var textblock = sender.findName('ClickTarget');

}

一旦获得了文本块（或其他元素），就可以把事件处理赋给它。完成这个任务的方法是 addEventListener()，它有两个参数：

1. 事件的名称

2. 事件处理，也可以是一个方法的引用，或一个匿名方法

textblock.addEventListener( 'MouseLeftButtonDown',mouseClick);

以上所执行的是实际的事件处理，它输出两个元素，触发的事件和它的名称。例5-6显示了JavaScript文件的完整代码，图5-3是浏览器中的输出效果。

例5-6 使用事件侦听，XAML JavaScript文件（MouseClickListener.xaml.js）

function canvasLoaded(sender, eventArgs) {

var textblock = sender.findName('ClickTarget');

textblock.addEventListener(

'MouseLeftButtonDown',

mouseClick);

}

function mouseClick(sender, eventArgs) {

alert('Ouch, says ' + sender.toString() + '“'+sender.name+ '”!');

}

图 5-3 使用程序给事件侦听赋值

移除事件侦听将会使它被“Mouse Position”的代码段所覆盖。

鼠标事件

Silverlight 1.0支持5个鼠标事件，其中三个前面已经介绍过：

MouseEnter

鼠标指针移动到对象显示区域内

MouseLeave

鼠标指针从对象显示区域离开

MouseMove

鼠标移动

MouseLeftButtonDown

鼠标左键按下

MouseLeftButtonUp

鼠标左键单击并释放

这些事件是自解释的，但应该解释一下 MouseLeftButtonDown和 MouseLeftButtonUp之间的不同之处。单用户在某元素上单击鼠标，首先会触发 MouseLeftButtonDown事件，然后是 MouseLeftButtonUp事件。所以鼠标单击是在 MouseLeftButtonUp事件被触发之后才完成。实际上它们之间只有在一种情况下才会有区别：用户把鼠标指针移动到元素之上，按下鼠标按钮不放，再次移动鼠标离开元素。当您使用 MouseLeftButtonUp事件，它将不会被触发，这符合一些场影的需要（如按钮事件），但不符合别一些场影的需要（如鼠标拖动）。

提示：鼠标事件针对矢量图格式 SVG的机制如支持三种鼠标事件：按钮按下，按钮释放，按钮单击。