Silverlight的事件冒泡整理

转自 http://blog.csdn.net/dotfun/article/details/2887173

在Silverlight中,提供了事件冒泡,使得我们可以在父节点上接收和处理来自于子节点的事件,Silverlight中的事件采用 了冒泡路由策略。在鼠标事件中MouseLeftButtonDown 、MouseLeftButtonUp 、MouseMove三个事件都支持路由 事件,而MouseEnter、MouseLeave两个事件不支持。

 

 

  事件冒泡机制是指子对向沿着对象层次结构向上传递事件,比如在一个画布中包含一个矩形,如果为矩形和画布都定义了MouseMove事件,那么当在矩形上移动鼠标时,矩形会将MouseMove事件传递到他的父对象,那么父对象也会触发MouseMove事件。

下面举一个示例。

在该图中有两个矩形,当鼠标在矩形上移动时,可以看到同时也触发了Canvas的MouseMove事件。该示例的XAML代码如下所示。

<Canvas x:Name="parentCanvas"

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

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

        Loaded="Page_Loaded"

        x:Class="bubbledeventDemo.Page;assembly=ClientBin/bubbledeventDemo.dll"

        Width="640"

        Height="480"

        MouseMove="onCanvasMouseMove"

        Background="White"

        >

 <!--定义矩形A,并指定移动事件-->

 <Rectangle

      x:Name="RectA"

      MouseMove="onRectMouseMove"

      Width="100" Height="100" Fill="PowderBlue" />

 <!--定义矩形B,并指定与矩形A相同的移动事件-->

 <Rectangle

    x:Name="RectB"

    MouseMove="onRectMouseMove"

    Width="100" Height="100" Fill="Gold"

    Canvas.Top="50" Canvas.Left="50" Opacity="0.5" />

 <!--定义当鼠标在矩形上面移动时的文本显示-->

 <TextBlock x:Name="statusTextBlock" Canvas.Top="180" />

 <!--由事件冒泡机制引发画布的MouseOver事件所显示的文本-->

 <TextBlock x:Name="canvasBlock" Canvas.Top="220" />

</Canvas>

鼠标事件己经直接在XAML代码中进行了指定,因此在这里只要直接编写事件处理代码即可,代码如下所示。

        //画布鼠标移动事件

        void onCanvasMouseMove(object sender, MouseEventArgs e)

        {

            string msg = "x:y = " + e.GetPosition(null).X.ToString() + ", " + e.GetPosition(null).Y.ToString();

            canvasBlock.Text = "Canvas: " + msg;

        }

        //鼠标移动事件

        void onRectMouseMove(object sender, MouseEventArgs e)

        {

            string msg = " x:y = " + e.GetPosition(null).X.ToString() + ", " + e.GetPosition(null).Y.ToString();

            statusTextBlock.Text =((Rectangle)sender).Name+ msg;

        }

代码调用GetPosition获取鼠标的位置,并赋给TextBlock进行显示。通过事件冒泡机制,当在矩形上移动鼠标时,同时也触发了画布的MouseMove事件。

时间: 2024-11-14 12:20:37

Silverlight的事件冒泡整理的相关文章

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结_基础知识

抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)_jquery

俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们

山寨版AS3事件冒泡机制的实现

AS3实现了事件传递,分成三段Capture,target和bubble,其中bubble就是向树根传递.这个机制非常之经典和好用,可惜它只存在在基于DisplayObject的对象树中,其它时候只能把事件老老实实的从一个对象直接传递到另一个对象. 这次我来玩个有趣的.仿造AS3内置的机制来制作一个更加通用的冒泡框架,相信可以用很多用处(至少已经用在我的项目上了).自己实现事件传递,让它支持任何事件任何数据结构(无论队列,还是树),甚至可以传递任何对象(而不仅限于事件对象).其实bubble的过

JavaScript和JQuery的鼠标mouse事件冒泡处理

  这篇文章主要介绍了JavaScript和JQuery的鼠标mouse事件冒泡处理,本文总结出了mouse事件的一些定论,并分别给出了JavaScript和JQuery测试代码,需要的朋友可以参考下 简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 代码如下: mouseleave: 不冒泡 mouse

JQuery中DOM事件冒泡实例分析

 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. 1 2 3 4 5 <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 &

javascript事件冒泡和事件捕获详解

  最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分享给大家. 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. ? 1 2 3 <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如

javascript事件冒泡实例分析

  本文实例讲述了javascript事件冒泡.分享给大家供大家参考.具体分析如下: 事件冒泡: 如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html xmlns="htt

JQuery中阻止事件冒泡几种方式及其区别介绍

 JQuery中阻止事件冒泡方式有哪些?本文为大家准备了两种阻止事件冒泡的方式,两种方式的区别在于.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身 JQuery 提供了两种方式来阻止事件冒泡.    方式一:event.stopPropagation();   代码如下: $("#div1").mousedown(function(event){  event.stopPropagation();  });    方式二:return false;  代码如下:

jQuery中事件对象e的事件冒泡用法

 e.stopPropagation()阻止事件冒泡  代码如下: <head>  <title></title>  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>  </head>  <body>  <table>  <tr>  <td><span