這篇文章給大家分享的是有關(guān)javascript是什么樣的腳本語(yǔ)言的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

沁陽(yáng)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司于2013年開(kāi)始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

javascript是一種事件驅(qū)動(dòng)的腳本語(yǔ)言。javascript是采用事件驅(qū)動(dòng)的機(jī)制來(lái)響應(yīng)用戶(hù)操作的，也就是說(shuō)當(dāng)用戶(hù)對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)事件，該事件會(huì)驅(qū)動(dòng)某些函數(shù)來(lái)處理。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

還記得當(dāng)初學(xué)JAVA-GUI編程時(shí)學(xué)習(xí)過(guò)事件監(jiān)聽(tīng)機(jī)制，此時(shí)再學(xué)習(xí)JavaScript中的事件驅(qū)動(dòng)機(jī)制，不免簡(jiǎn)單。當(dāng)初學(xué)習(xí)時(shí)也是畫(huà)過(guò)原理圖，所以從原理圖開(kāi)始吧！

js是采用事件驅(qū)動(dòng)(event-driven)響應(yīng)用戶(hù)操作的。也就是說(shuō)當(dāng)用戶(hù)對(duì)某個(gè)html元素進(jìn)行操作的時(shí)候，會(huì)產(chǎn)生一個(gè)事件，該事件會(huì)驅(qū)動(dòng)某些函數(shù)來(lái)處理。

比如通過(guò)鼠標(biāo)或者按鍵在瀏覽器窗口或者網(wǎng)頁(yè)元素(按鈕，文本框...)上執(zhí)行的操作，我們稱(chēng)之為事件(Event)。由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動(dòng)作，稱(chēng)之為事件驅(qū)動(dòng)(Event-Driver)。對(duì)事件進(jìn)行處理程序或函數(shù)，我們稱(chēng)之為事件處理程序(Event Handler)。

事件的分類(lèi)：

鼠標(biāo)事件：

當(dāng)用戶(hù)在頁(yè)面上用鼠標(biāo)點(diǎn)擊頁(yè)面元素時(shí)，對(duì)應(yīng)的dom節(jié)點(diǎn)會(huì)觸發(fā)鼠標(biāo)事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。

鍵盤(pán)事件：

當(dāng)用戶(hù)用鍵盤(pán)輸入信息時(shí)，會(huì)觸發(fā)鍵盤(pán)操作事件。主要包括keydown、keypress、keyup三個(gè)。

HTML事件：

在html節(jié)點(diǎn)加載變更等相關(guān)的事件，比如window的onload、unload、abort、error，文本框select、change等等。

其它事件：

頁(yè)面中一些特殊對(duì)象運(yùn)行過(guò)程中產(chǎn)生的事件，比如xmlhttprequest對(duì)象的相關(guān)事件。

如下例：

作為第一個(gè)入門(mén)案例，會(huì)遇到一個(gè)問(wèn)題如下：

代碼如下：

    
    
    
        function test(e) {
            window.alert("x = "+ e.cientX + " y =" + e.clientY);
        }
    


    

以上代碼的作用是，在鼠標(biāo)按下后，彈出窗口顯示x、y的坐標(biāo)。

這段代碼在IE9、Chrome下都不可以正常運(yùn)行。這到底是什么原因呢?

后來(lái)，我就搜索了一下，發(fā)現(xiàn)有人和我有同樣的問(wèn)題，他也解決了，我是參考js的onmousedown事件放在標(biāo)簽下與firefox瀏覽器所產(chǎn)生的問(wèn)題這篇文章的。

原來(lái)是body的原因。

于是，我就給body加了個(gè)寬高試試：

    
    
    
        function test(e) {
            window.alert("x = "+ e.cientX + " y =" + e.clientY);
        }
    


    

我們不難發(fā)現(xiàn)，當(dāng)我們沒(méi)有給body設(shè)置寬高時(shí)，body的范圍僅僅是一條線，所以onmousedown事件也就無(wú)法響應(yīng)。所以，在給body設(shè)置寬高后，我們就可以在body的寬高范圍響應(yīng)onmousedown事件了。

如何理解事件驅(qū)動(dòng)機(jī)制

為了讓大家進(jìn)一步理解js的事件驅(qū)動(dòng)機(jī)制，我們來(lái)看兩個(gè)案例：

案例：顯示一個(gè)按鈕，點(diǎn)擊按鈕后彈出對(duì)話(huà)框顯示當(dāng)前時(shí)間。

    
    
    
        function test1() {
            window.alert(new Date().toLocaleString());
        }
    


    

案例：通過(guò)點(diǎn)擊按鈕改變div的顏色。

    
    
    
        //js如何訪問(wèn)元素的style屬性，進(jìn)行樣式修改
        function test4(eventObj) {
            //怎么知道button1被按，還是button2被按下
            //window.alert(eventObj.value);
            if(eventObj.value == "黑色") {
                //獲取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "black";
            } else if(eventObj.value == "紅色") {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
    


    div1