2013-10-25 51 views
3

我是javascript新手。我很好奇瀏覽器如何使onClick屬性起作用。 你的HTML有這樣的:onClick中的「this」如何工作?

<button id="1" onClick="reply_click(this.id)">B1</button> 

是什麼瀏覽器做執行的(JavaScript的永諾?)腳本函數?

我想這是類似評估給予onClick的字符串。

但我有這樣的懷疑:這裏的應用標準是什麼?瀏覽器如何知道使用哪種腳本語言? javascript引擎如何填充this?腳本在什麼情況下執行?返回值會發生什麼?我想讀什麼知道在使用這些屬性時可以依靠什麼?

你能幫我理解發生了什麼嗎?

+5

你想讓我們在這裏寫書嗎? –

+0

@JayantVarshney對不起,沒有打算;相反,只是希望你能指出我正確的方向(這就是爲什麼我試圖將我的問題列表標記爲'疑惑',而不是實際詢問他們,只是試圖解釋我的問題是什麼)。像我可以搜索的近似術語以及對發生的事情的非常模糊的概述的幾個方向將會起作用。我在網絡搜索中找不到任何內容,因爲「this」與關鍵字相比太模糊了,我不知道正確的詞彙。網絡上也充滿了「如何使用」的教程,使得結果不太好。 – n611x007

回答

6

當您設置onclick屬性;瀏覽器爲基準,以你設置它的節點,我們稱之爲參考button,然後做了transfomation

onclick="/* code */" 

button.onclick = function (event) {eval(/* code */);}; 

點擊事件則tirggered ,該功能可以被認爲是這樣調用的

button.onclick.call(button, click_event); 

給出onclick上下文button,因此thisbutton。它被包裝在它自己的函數中,所以如果有東西是vard它不會在全局範圍內設置。


帶有返回值會發生什麼?

返回false是主叫event.preventDefault();的等效,確切行爲描述here


如何在瀏覽器知道用哪個的腳本語言?

假設的JavaScript除非明確說明,否則


我怎麼想讀就知道我有什麼可以依靠與這些屬性工作時呢?

不學這些HTML屬性,它們的日期,可能是危險的和混音HTML的JavaScript在一起。反而學會使用EventTarget.addEventListener

+0

「eval」的使用不正確,因爲該代碼會在執行的代碼中破壞「this」的值。試試'new Function(/ * code * /)'作爲更好的描述。 – cloudfeet

+1

@cloudfeet'(function(){eval('console.log(this);');})。call(document.body);'logs'' –

+1

那麼這是不直觀的。我立場糾正。 – cloudfeet

1

瀏覽器假設使用JavaScript,基本上是因爲雖然理論上可以是任何腳本語言,但實際上JavaScript已經贏了。

它執行onclick中的代碼,其中this是點擊事件觸發的元素。

返回值的使用方式與element.onclick = function() {...}完全相同。

事實上,整個事情的作品等同於:

var element = document.getElementById('1'); 
element.onclick = new Function(element.getAttribute('onclick')); 
4

唷,這是一個很大的問題!

問:是什麼瀏覽器做執行的(JavaScript的永諾?)腳本函數

問:如何將瀏覽器知道用哪個的腳本語言

A.現代瀏覽器總是採用Javascript,除非它帶有前綴標籤,例如onclick="vbscript:alert('Hello World!');"

問:這是如何通過JavaScript引擎填補了

A.this通常是指在其上添加了onclick元素,在這種情況下button元素

問:腳本在什麼情況下執行

A.該腳本在窗口範圍內執行。

問:有返回值

A.的返回值決定了瀏覽器是否應該繼續執行默認代碼此元素會發生什麼。如果按鈕是一個提交按鈕,您將返回false,你的表格將不會發布

問:我想和看了就知道我有什麼可以依靠與這些屬性工作時對

A.一本Javascript書。看看亞馬遜上的頂級Javascript書籍。

+0

好回答RGraham,保持它。 – anand4tech

+0

我接受了保羅的答案,因爲它提供了一個更好的過程概述,但是這個答案也很棒! – n611x007

+0

人們可以找到很多Javascript書籍,但是爲JavaScript做的一些通常會像這樣在引擎蓋下?許多介紹性的書籍一般只列出要遵守的語法和可用的語言元素,並不總是解釋其背後的內容。我預計不會有書的標題,但仍然需要查找特定的內容,例如「特徵名稱」或「Y中找到的ecmascript標準的X.Z節」,但不確定它是否在規範中。 – n611x007

0

瀏覽器如何知道使用哪種腳本語言?

您需要寫出<script>標籤inorder來編寫腳本。如果沒有暗示腳本類型,則默認腳本是JavaScript。 如果您使用各種JavaScript庫或類似的jQuery,那麼您需要在調用中使用$或jQuery infront。

返回值會發生什麼?

沒有實際的回報價值。它基本上是你用onClick調用的函數中發生的事情。