歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

Copyright © Linux教程網 All Rights Reserved