JavaScript事件簡述

事件簡述

　　技術一般水平有限，有什麼錯的地方，望大家指正。

　　事件是我們平時經常使用，這次就來了解一下事件。首先我們要明確幾個概念，JavaScript是單線程，浏覽器是多線程的，並不是所有的事件處理函數都是異步的。

　　前兩個我們都知道，這裡我們主要介紹第三個。事件處理函數可以在將來執行，只要滿足觸發條件就會執行事件處理函數。我們經常看到的一個場景，在循環中為一組元素綁定事件，彈出它在這組元素中的索引：

<button>button1</button><button>button2</button><button>button3</button>

$(function(){
    var btns = $("button");
    for(var i=0,il=btns.length;i<il;i++){
        $(btns[i]).click(function(){
            console.log(i);
        })
    }
})

　　上面的代碼我們在點擊的時候每一個都是打印3，並不能實現我們預期的目的，這是因為我們點擊的時候i的值已經變成3，而事件處理函數的行為是打印i浏覽器此時就會去查詢i，然後找到i=3所以點擊每一個按鈕都會打印3，要實現我們預期的目的就需要用到閉包：

$(function(){
    var btns = $("button");
    for(var i=0,il=btns.length;i<il;i++){
        ;(function(i){
            $(btns[i]).click(function(){
                console.log(i);
            })
        }(i))
    }
})

　　雖然每一個點擊事件的處理函數仍然是打印i但是此時浏覽器去查找i的時候會優先找到作為參數的i,而此時的i就是當前循環的i的值。　　

　　普通的事件是同步執行的，看下面的一段代碼：

$(function(){
    var btn = $("#button");
    btn.on("click",function(){
        var span = $("<span class='span'>這是點擊按鈕創建的元素</span>");
        $("body").append(span);
        $(this).off("click");
    })
    btn.trigger("click");
    $(".span").css("color","red");
})

　　開始我一直以為$(".span").css("color","red")會先於點擊事件的處理函數之前執行，後來發現自己是錯的，trigger("click")觸發之後就會去執行創建DOM的語句，之後才會執行改變顏色的語句。

異步的事件處理函數

　　什麼是異步呢？我們知道JavaScript是單線程的語言，而浏覽器是它的執行環境（非Node.js），而浏覽器是有多個線程來處理不同的工作的。我們的JS代碼在編譯完成之後，開始從上往下執行，如果執行到像setTimeout之類的這種異步函數就會把它的處理函數放在浏覽器的消息隊列中，當JS代碼執行完之後，會通知消息隊列，查看有沒有需要執行的代碼，如果有就執行。

　　有一些事件處理函數是異步的包括window.onload或者JQ中的$(function(){})都是異步的，AJAX肯定是異步的這個是毋庸置疑的。

window.onload = function(){
    console.log("onload")
}
function handler(){
    console.log("handler");
}
handler();
//先打印handler 後打印onload

　　setTimeout和setInterval也是異步的：

setTimeout(function(){
    console.log("setTimeout");
},0)
function handler(){
    console.log("handler");
}
handler();
//先打印handler 後打印setTimeout

JavaScript權威指南(第6版) PDF中文版+英文版+源代碼 下載地址見 http://www.linuxidc.com/Linux/2013-10/91056.htm