讓我們回顧一下第二章的第一個例子“Hello World”，它包含了三個元素，外層的<Canvas>，一個<Rectangle>和一個<TextBlock>。我們給這三個元素新增事件處理。新增一個事件處理非常容易：新增一個和事件名稱相同的屬性（在此例中，使用LeftMouseButtonDown而不是JavaScript中的OnLeftMouseButtonDown）。這個屬性的值是JavaScript的方法名稱。當事件觸發時將呼叫這個方法一次。例5-1顯示了這個包括三個事件處理的XAML檔案：

例5-1 使用事件處理，XAML檔案（MouseClick.xaml）

<Canvas xmlns=""

xmlns:x=""

MouseLeftButtonDown="mouseClick">

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

MouseLeftButtonDown="mouseClick" />

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

Foreground="Black" Text="Silverlight"

MouseLeftButtonDown="mouseClick" />

Canvas>

JavaScript事件處理方法存在於MouseClick.js.xaml檔案內，它象ASP.NET事件處理方法一樣接收兩個引數：

sender

接收到事件的那個物件的引用，並會呼叫事件處理。

eventArgs

事件的資訊，例如，當處理一個滑鼠事件時，可以得到當前滑鼠的位置。簡單的事件處理方法所做的是顯示哪個元素觸發了事件。為了實現這個功能，需要使用到sender引數的字串表達。例如，當<TextBlock>元素觸發了事件，sender.toString()所返回的是TextBlock。例5-2中的.xaml.js檔案中的“XAML code-behind”程式碼演示了這項功能。

例5-2 使用事件處理，XAML JavaScript檔案（MouseClick.xaml.js）

function mouseClick(sender, eventArgs)

{

alert('Ouch, says ' + sender.toString() + 'l');

}

現在，當您單擊文字塊時，將會彈出兩個JavaScript視窗：一個是文字塊的，另一個是canvas的（圖5-1）。這叫做“事件浮升機制”。無論何時，當一個元素接收到一個事件，它會把事件向上傳播到父節點（在本例中，<TextBlock>把事件傳播給<Canvas>）。如果父節點本身還有父節點，事件還會繼續向上傳播。這種機制和JavaScript在Explorer瀏覽器裡的事件機制很相似，它經常用於巢狀的XAML結構，並且需要為幾個物件新增事件處理。當然例5-1的這種機制是很少使用的，一般只給一個元素新增事件處理。

譯者注：由於使用了XAML的程式碼隱藏檔案，所以這個例子需要的是四個檔案，除了前面一章所講的三個檔案外，還多了一個xaml.js檔案。例5-2所演示的就是這個檔案。這樣就需要在html檔案內多加一行程式碼引用這個檔案。在html檔案中的

程式碼後面新增一行

這樣就可以正常執行程式了。後面的例子也是這樣處理。

事件偵聽

第二種是使用程式碼的方法：使用事件偵聽把一個事件處理賦給一個事件。您可以安排一段程式碼“偵聽”是否有事件發生。如果發生了，將會進行適當地處理。宣告事件處理的主要優勢是很容易移除一個事件偵聽。不利條件是事件偵聽並非自動生成的，特別對於一些有很強的HTML背景的開發人員。但當您第一次使用它，並在程式中使用它根本不困難。

讓我們開始一段XAML程式碼。正如您所見，並沒有專門針對單擊事件的事件處理屬性。好，這有另外一個重要的事件：Loaded。一個元素只會觸發一次Loaded事件，如例5-5，整個XAML檔案被完全載入後，我們使用這個事件建立實際的事件偵聽。

例5-5 使用事件偵聽，XAML檔案（MouseClickListener.xaml）

<Canvas xmlns=""

xmlns:x=""

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>

但現在對於事件偵聽來說，首先你不得不尋找跟事件偵聽關聯的元素。在例5-5中我們應該注意到，元素有一個名稱屬性（準確地說是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的機制如支援三種滑鼠事件：按鈕按下，按鈕釋放，按鈕單擊。