none
Essential Silverlight翻译连载---第五章 续1 RRS feed

  • 常规讨论

  • 事件侦听

    第二种是使用代码的方法:使用事件侦听把一个事件处理赋给一个事件。您可以安排一段代码“侦听”是否有事件发生。如果发生了,将会进行适当地处理。声明事件处理的主要优势是很容易移除一个事件侦听。不利条件是事件侦听并非自动生成的,特别对于一些有很强的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>元素有一个名称属性(准确地说是xName,)。SilverlightJavaScript 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

    鼠标左键单击并释放

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

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


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:21
    版主