返回列表 發帖

Hello world! 事件綁定的範例 (jQuery、ExtJS)

範例一

簡單到不行的範例,按下面的按鈕會以 JavaScript Alert 視窗顯示訊息。

<input type="button" value="Hello, JavaScript!" onclick="alert('Hello World!')" />
很傳統的事件處理方式,直接把 onclick 事件指定在 HTML 裡面,但是隨著網頁標準化的意識逐漸抬頭,越來越多的書籍或教程中也提倡所謂的 Unobtrusive JavaScript,主張把 HTML 和 JavaScript 分離,於是範例一漸漸變成負面教材了,請忘了範例一的方式,看看怎麼做 HTML 與 JavaScript 分離的事件綁定 (binding)。


範例二

同樣是按下按鈕顯示訊息,不同的是,這是透過 jQuery 來做事件的綁定。



HTML 的部份如下,按鈕的部份並沒有指定如何處理事件。
<input type="button" value="Hello, jQuery!" id="jqueryButton" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
JavaScript 的部份如下,可以放在同一網頁上的 <script> 區塊內,但是一般來說比較建議的方式是獨立為一個 js 檔案再 include 進來。這邊就用到了 jQuery 的事件綁定函數,程式會等網頁文件都載入完成後,才把事件的處理函數加到 button 上,將 JavaScript 與 HTML 完全分離。
$(document).ready(function() {
  $('#jqueryButton').click(function() {
    alert('jQuery Rocks!');
  });
});
範例三

這個範例同樣是 HTML 與 JavaScript 分離的方式,但是改用另一個相當棒的 JavaScript Framework - ExtJS。把 ExtJS 稱作一個 Framework 一點也不為過,因為 ExtJS 整個架構非常完整,所有的元件、UI、事件處理都經過精心規劃,非常適合用來開發 one page application。這個範例只做了 click 事件的綁定,當然算是大材小用,不過也讓沒見過 ExtJS 的人可以稍微體驗一下 ExtJS 的威力。



HTML 的部份如下,button 不再是 button,而是一個空的 <div>,因為 ExtJS 會塞入很多內容到 <div> 內,把 <div> 裝飾成很漂亮的 button。另外還引用了一個 css 檔以及兩個 js 檔,檔案是大了點,所以剛剛有說了嘛,有點大材小用的感覺。
<div id="extjsButton"></div>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
JavaScript 的部份如下,與 jQuery 類似,提供了一個網頁載入完成後才執行的函數 Ext.onReady(),函數內產生一個 Ext.Button,並指定外觀及事件處理函數。
Ext.onReady(function() {
  new Ext.Button({
    renderTo: 'extjsButton',
    text: 'Hello, ExtJS!',
    handler: function() {
      Ext.Msg.alert('Hello', 'Welcome to jsGears.com!');
    }
  });
});
PS. 討論區結合程式碼範例的這個功能剛上線,如有發現問題,歡迎回報。
To infinity and beyond!

返回列表 回復 發帖