1.加載DOM

在頁面加載完畢後，JS用window.onload為DOM元素添加事件，jQuery中，用$(document).ready()為DOM元素添加事件，使用該方法可以在DOM載入就緒時對其進行操作並調用執行它所綁定的函數。

window.onload和$(document).ready()對比

補充：load()方法會在元素的onload事件中綁定一個處理函數，如果處理函數綁定給window對象，則會在所有內容（包括窗口、框架、對象和圖像等）加載完畢後觸發，如果處理函數綁定在元素上，會在元素的內容加載完畢後觸發。

1 $(window).load(function(){
2 //編寫代碼
3 })

2.事件綁定— —bind()方法

格式：bind(type [, data] , fn)

第一個參數是事件類型：blur、focus、load、unload、resize、scroll、click、dblclick、mousedown、mouseover、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error

第二個參數是可選參數，作為evert.data屬性值傳遞給事件對象的額外數據對象

第三個餐食是用來綁定的處理函數

補充：判斷一個元素是否顯示，jQuery中用is()方法

簡寫：.mouseover(function(){})

3.合成事件

hover()方法：模擬光標懸停事件

格式：hover(enter , leave);

當光標移動到元素上時，會觸發指定的第一個函數，當光標移除這個元素時，會觸發指定的第2個函數

替代事件：bind("mouseenter")和bind("mouseleave")

toggle()方法：模擬鼠標的連續單擊事件

格式：toggle(fn1,fn3......fnN);

1 $(function()){
2       $("#panel").toggle(function(){
3                $(this).next().show();
4        },function(){
5                 $(this).next().hide();
6        })
7 })

補充toggle還有另一個作用：切換元素的可見狀態。如果元素課件，單擊後切換為隱藏。如果元素是隱藏的，單擊切換後為可見

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

4.事件冒泡

冒泡：嵌套元素相應同一個事件的執行順序，事件按照DOM的層次結構向上直至頂端

事件冒泡引發的問題：

（1）事件對象：event

創建事件對象只需要為事件處理函數添加一個參數event，對元素執行事件時，事件對象就被創建了，這個對象只有事件處理函數才能訪問到，事件處理函數執行完畢後，事件對象就被銷毀

（2）停止事件冒泡：event.stopPropagation()方法

（3）阻止默認行為：event.preventDefault()方法

例子：表單驗證不符合提交條件時阻止表單的提交（默認行為）

1 $(function(){
2        $("#sub").bind("click",function(event){
3                var username=$("#username").val();
4                if(username==""){
5                       $(""#msg).html("<p>文本框內容不能為空</p>")；
6                       event.preventDefault();
7                }
8          })
9 })

如果想同時對事件對象停止冒泡和默認行為，可在事件處理函數中返回false

5.事件捕獲

事件捕獲和事件冒泡是想法的過程，事件捕獲是從頂端往下開始觸發

並非所有的瀏覽器都支持事件捕獲，jQuery也不支持

6.事件對象的屬性

補充：（1）JS中的stopPropagation()方法不兼容IE瀏覽器

jQuery中的事件