CSS結合JS-事件的應用

CSS結合JS的運用

利用CSS配合JavaScript的可以做很多更酷的動態頁面效果，在本教程的最後給大家簡單介紹一下CSS配合JS的應用。首先，要搞清楚事件和動作的概念。在用戶端腳本中，JavaScript 通過對事件進行回應來獲得與用戶的交互。例如，當用戶單擊一個按鈕或者在某段文字上移動滑鼠時，就觸發了一個單擊事件或滑鼠移動事件，通過對這些事件的回應，可以完成特定的功能(例如，單擊按鈕彈出對話方塊，滑鼠移動到文本上後文本變色等)。

下面介紹幾種常見的事件：
　　onClick：滑鼠單擊事件。(是指滑鼠按下，然後鬆開時產生。
　　onDblClick：滑鼠雙擊事件。(是指滑鼠快速按下，鬆開，並再次按下時產生。)
　　onMouseDown：滑鼠按下事件。(滑鼠按下時即產生。)
　　onMouseUp：滑鼠釋放事件。(是指滑鼠從按下的狀態到彈起。)
　　onMouseMove：滑鼠移動事件。(是指在特定元素上移動滑鼠。)
　　onMouseOver：滑鼠經過事件。(是指，當指標從外界往元素上移動時產生。
　　onMouseOut：滑鼠離開事件。(是指滑鼠從特定元素上離開時產生。)
　　onLoad：載入事件。(當圖像或頁面結束載入時產生。)
　　onUnload：卸載事件。(當訪問者離開頁面時產生。)
　　onScroll：捲軸滾動事件。(當訪問者使用卷軸上移或下移時產生。)

　　有了事件以後，我們就為事件加上動作。這裏只說改變當前元素自定義樣式的動作，我們可以用這個方法先設定好兩個自定義的CSS樣式，物件原先調用第一種樣式，當產生滑鼠事件時讓物件應用到第二種CSS樣式，而產生的滑鼠效果。