事件簡述
技術一般水平有限,有什麼錯的地方,望大家指正。
事件是我們平時經常使用,這次就來了解一下事件。首先我們要明確幾個概念,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