js的執(zhí)行原理是什么？

JS是解釋執(zhí)行的，即讀取一個語句就執(zhí)行一個。以前的嚴格JS是以分號為語句的分隔符，但現(xiàn)在一些瀏覽器已經(jīng)接受以換行符為分隔符（似乎是很多人喜歡用基于對象的編程了，而在JS中寫對象的函數(shù)是需要加分號的，所以很多人都愛忘）。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務公司，擁有項目做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元從江做網(wǎng)站,已為上家服務,為從江各地企業(yè)和個人服務,聯(lián)系電話:13518219792

JS本身只提供語法解析與少部分內(nèi)部函數(shù)支持，其他的均由宿主支持。比如在網(wǎng)頁JS中的window, document, navigator等對象，均是由瀏覽器提供基于其它語言的代碼，這些代碼通常被隱藏，但很大程度上決定了JS的運行效率。如果你有興趣，打開Chrome，按F12，調(diào)處Console，然后輸alert（注意沒有()），你就會發(fā)現(xiàn)[native code]這個東西。

javascript是面向?qū)ο筮€是面向過程？

javascript是面向過程的，因為是解釋性預言，按照頁面加載一行一行的執(zhí)行，但是可以模擬面向?qū)ο蟮拇a寫法

請說明JavaScript中處理事件的步驟

事件處理程序的方式了：

1. 設置HTML標簽屬性為事件處理程序

文檔元素的事件處理程序?qū)傩裕涿钟伞皁n”后面跟著事件名組成，例如：onclick、onmouseover。當然了，這種形式只能為DOM元素注冊事件處理程序。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1" onClick="console.log('div1');"div1

div id="div2" oNClick="console.log('div2');"div2

div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3

/div

/div

/div

script type="text/javascript"

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①因為HTML里面不區(qū)分大小寫，所以這里事件處理程序?qū)傩悦髮?、小寫、大小混寫均可，屬性值就是相應事件處理程序的JavaScript代碼；

②若給同一元素寫多個onclick事件處理屬性，瀏覽器只執(zhí)行第一個onclick里面的代碼，后面的會被忽略；

③這種形式是在事件冒泡過程中注冊事件處理程序的；

2.設置JavaScript對象屬性為事件處理程序

可以通過設置某一事件目標的事件處理程序?qū)傩詠頌槠渥韵鄳氖录幚沓绦颉Ｊ录幚沓绦驅(qū)傩悦钟伞皁n”后面跟著事件名組成，例如：onclick、onmouseover。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.onclick = function(){

console.log('div1');

};

div2.onclick = function(){

console.log('div2');

};

div3.onclick = function(){

console.log('div3');

};

div1.onclick = function(){

console.log('div11111');

};

div1.onClick = function(){

console.log('DIV11111');

};

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①因為JavaScript是嚴格區(qū)分大小寫的，所以，這種形式下屬性名只能按規(guī)定小寫；

②若給同一元素對象寫多個onclick事件處理屬性，后面寫的會覆蓋前面的（ps：這就是在修改一個對象屬性的值，屬性的值是唯一確定的）；

③這種形式也是在事件冒泡過程中注冊事件處理程序的；

3.addEventListener()

前兩種方式出現(xiàn)在Web初期，眾多瀏覽器都有實現(xiàn)。而addEventListener()方法是標準事件模型中定義的。任何能成為事件目標的對象——這些對象包括Window對象、Document對象和所有文檔元素等——都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目標注冊事件處理程序。addEventListener()接受三個參數(shù)：第一個參數(shù)是要注冊處理程序的事件類型，其值是字符串，但并不包括前綴“on”；第二個參數(shù)是指當指定類型的事件發(fā)生時應該調(diào)用的函數(shù)；第三個參數(shù)是布爾值，其可以忽略（某些舊的瀏覽器上不能忽略這個參數(shù)），默認值為false。這種情況是在事件冒泡過程中注冊事件處理程序。當其為true時，就是在事件捕獲過程中注冊事件處理程序。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);

div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);

div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);

div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);

div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①addEventListener()第三個參數(shù)的作用正如上面所說；

②通過addEventListener()方法給同一對象注冊多個同類型的事件，并不會發(fā)生忽略或覆蓋，而是會按順序依次執(zhí)行；

相對addEventListener()的是removeEventListener()方法，它同樣有三個參數(shù)，前兩個參數(shù)自然跟addEventListener()的意義一樣，而第三個參數(shù)也只需跟相應的addEventListener()的第三個參數(shù)保持一致即可，同樣可以省略，默認值為false。它表示從對象中刪除某個事件處理函數(shù)。實例：

div1.addEventListener('click', div1BubbleFun, false);

div1.removeEventListener('click', div1BubbleFun, false);

function div1BubbleFun(){

console.log('div1-bubble');

}

4.attachEvent()

但是，IE8以及其之前版本的瀏覽器并不支持addEventListener()和removeEventListener()。相應的，IE定義了類似的方法attachEvent()和detachEvent()。因為IE8以及其之前版本瀏覽器也不支持事件捕獲，所以attachEvent()并不能注冊捕獲過程中的事件處理函數(shù)，因此attachEvent()和detachEvent()要求只有兩個參數(shù)：事件類型和事件處理函數(shù)。而且，它們的第一個參數(shù)使用了帶“on”前綴的事件處理程序?qū)傩悦?。實例?/p>

var div1 = document.getElementById('div1');

div1.attachEvent('onclick', div1BubbleFun);

function div1BubbleFun(){

console.log('div1-bubble');

}

相應的，從對象上刪除事件處理程序函數(shù)使用detachEvent()。例如：

div1.detachEvent('onclick', div1BubbleFun);

到此為止，我們已經(jīng)說了瀏覽器中事件傳播機制以及各種注冊事件處理程序的方法。下面我們就再說說事件處理程序調(diào)用時的一些問題吧！

二.事件處理程序的調(diào)用

1.事件處理程序的參數(shù)：正如前面所說，通常事件對象作為參數(shù)傳遞給事件處理函數(shù)，但IE8以及其之前版本的瀏覽器中全局變量event才是事件對象。所以，我們在寫相關(guān)代碼時應該注意兼容性問題。實例（給頁面上id為div1的元素添加點擊事件，當點擊該元素時在控制臺輸出事件類型和被點擊元素本身）：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

if(div1.addEventListener){

div1.addEventListener('click', div1Fun, false);

}else if(div1.attachEvent){

div1.attachEvent('onclick', div1Fun);

}

function div1Fun(event){

event = event || window.event;

var target = event.target || event.srcElement;

console.log(event.type);

console.log(target);

}

/script

/body

/html

2.事件處理程序的運行環(huán)境：關(guān)于事件處理程序的運行環(huán)境，也就是在事件處理程序中調(diào)用上下文（this值）的指向問題，可以看下面四個實例。

實例一：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

/script

/body

/html

結(jié)果一：

從結(jié)果可以看出：

①第一種方法事件處理程序中this指向這個元素本身；

實例二：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

/script

/body

/html

結(jié)果二：

從結(jié)果可以看出：

①第二種方法事件處理程序中this也指向這個元素本身；

②存在第二種方法時，它會覆蓋第一種方法注冊的事件處理程序；

實例三：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.addEventListener('click', function(){

console.log('div1.addEventListener:');

console.log(this);

}, false);

/script

/body

/html

結(jié)果三：

從結(jié)果可以看出：

①第三種方法事件處理程序中this也指向這個元素本身；

②第三種方法并不會覆蓋第一種或第二種方法注冊的事件處理程序；

實例四：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.attachEvent('onclick', function(){

console.log('div1.attachEvent:');

console.log(this === window);

});

/script

/body

/html

結(jié)果四：

從結(jié)果可以看出：

①第四種方法事件處理程序中this指向全局對象Window；

②第四種方法也不會覆蓋第一種或第二種方法注冊的事件處理程序；

3.事件處理程序的調(diào)用順序：多個事件處理程序調(diào)用規(guī)則如下：

①通過HTML屬性注冊的處理程序和通過設置對象屬性的處理程序一直優(yōu)先調(diào)用；

②使用addEventListener()注冊的處理程序按照它們的注冊順序依次調(diào)用；

③使用attachEvent()注冊的處理程序可能按照任何順序調(diào)用，所以代碼不應該依賴于調(diào)用順序；

如何正確學習JavaScript

JavaScript作為網(wǎng)站前端的核心知識是非常重要的，但是如何學習JavaScript是很多初學者面對的一個難題，下面我說一下個人對于如何學習JavaScript的一點心得，希望能幫到大家。

1、首先學習基礎，尤其是JavaScript與其他語言不同的基礎知識。

學習每個編程語言可能都要從基礎的變量函數(shù)結(jié)構(gòu)等學起，JavaScript相對于其他的編程語言在基礎上有一些比較有特點的地方，這些東西是尤其需要我們注意的，比如說自調(diào)函數(shù)、比如說變量值為空不是null而是undefined的等，這些東西都是和主流的編程的語言如c++、java等是有區(qū)別的，所以想要學好JavaScript，這些基礎的知識一定要把握好學習好才行。

2、關(guān)于學習JavaScript的進階

JavaScript進階知識更是有很多難理解的東西和不同于其他語言的東西，這些東西都是深入學習JavaScript的難點，簡單的說一下JavaScript是基于對象的瀏覽器腳本語言，但是為了使JavaScript也能夠支持面向?qū)ο缶幊蹋藗兙褪褂昧撕芏嗟姆椒▉砟M面向?qū)ο蟮牡奶攸c，這些就變成了JavaScript的一些難點，比如說JavaScript的繼承要借助原型、比如JavaScript的類需要使用構(gòu)造函數(shù)來構(gòu)造一個對象等，這些東西都是和其他支持面向?qū)ο蟮恼Z言是不同的，所以就導致了一些難點。關(guān)于進階學習JavaScript，還有JavaScript一些深入的知識需要去理解比如原型鏈和閉包、比如收函數(shù)的作用域執(zhí)行流程和上下文，這些東西都是JavaScript比較深入的知識、

最后說明，JavaScript作為前端的核心語言絕對沒有沒有想象的那么簡單，要想學好JavaScript除了以上提到的知識和注意點，還需要的就是多動手和實踐，我們都知道網(wǎng)頁上的所有特效都是借助JavaScript來實現(xiàn)，那么我們就需要在學習JavaScript的過程中多使用原生的JavaScript代碼實現(xiàn)一些特效，當然學習使用jQuery等JavaScript類庫進行開發(fā)也十分的重要，但是這絕對不能是取代我們學習JavaScript的方法。

文章題目：javascript過程,js執(zhí)行的過程
網(wǎng)頁路徑：http://aaarwkj.com/article6/dsispog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、軟件開發(fā)、面包屑導航、網(wǎng)站營銷、做網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)