世間萬物,千變萬化,面向對象的編程亦是對現實社會的模擬,而JavaScript是一種基于對象并且很接近面向對象編程的編程語言,而我們web設計師/程序員跟JavaScript打交道亦要直面JavaScript才能夠把網頁寫得更加豐富多彩.在此先搞清楚一點就是:JavaScript并不僅僅用在Web上,它可以用在許多領域,當然我這里討論的更多的是JavaScript在Web上的應用,并且主要是事件方面的應用.
JavaScript并不能直接對Web對象進行操作,而是要通過瀏覽器提供的Document Object Modle(即常聽說的DOM,文檔模型對象)來操作對象.HTML是一個樹文檔,它以HTML標簽為根,其它的元素都是在HTML標簽之內,一級一級地延伸下去.而DOM中,則以window為根對象,其它的對象則為它的子對象或者它的子對象的子對象.
首先來認識一下什么叫事件,請看下邊的代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
很簡單的一個實例,頁面只有一個按鈕,它的value值為"這是一個按鈕",并且我們給它指定了onclick屬性,它的值為一行JavaScript代碼,使用了window對象的alert方法,將this.value的內容顯示在警告窗體中.這里的this是啥呢?this就是當前操作的對象,即該input對象.這份代碼告訴瀏覽器:"當前對象受點擊"的時候要調用window.alert(this.value)這行代碼,因此瀏覽器在按鈕受點擊的時候就執行了相關的操作.一個對象可以有許多事件,比如說單擊(click),雙擊(dbclick),鼠標移到上邊(mouseover),鼠標移開(mouseout)等等,這些事件經常在各種流傳的代碼中可以看到.那如何給一個對象設置事件發生時執行的代碼呢?一般來說有以下三種方式:
第一種:直接設置HTML元素的事件屬性,名稱一般是on+事件名稱,比如說單擊事件即為onclick,實例請見上邊的代碼
第二種:在script中對HTML對象設置事件屬性,名稱一般也是on+事件名稱,比如說obj.onclick = 函數,請見實例代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
或者: