內聯JS回調語法Vs的內部JS回調語法

內部回調JS語法如下：

<script> 
    document.getElementById('h3style').onMouseOver = changeColor; 
    function changeColor(){ } 
</script>

我明白，第一個語法是由瀏覽器引擎進行評估第二個語法由JS引擎評估。

但是，爲什麼html屬性onMouseOver作爲函數調用具有值（帶括號）不像第二種方法？爲什麼不允許使用html屬性語法（onMouseOver="changeColor;"）？

注：這是很難記住，兩個不同的語法

來源

2015-12-15 overexchange

讓我們先看看純js版本。

document.getElementById('h3style').onMouseOver = changeColor; 
function changeColor(){ }

現在在這種情況下，分配一個函數是唯一能夠做的事情。你可以明確地指定一些奇怪的東西，像是一個值，但這相當於代碼無所作爲（甚至沒有錯誤）。重點是你不能指定一個變量「一些JavaScript」來完成，你只能創建一個包含「一些JavaScript」的函數。但是JavaScript本身具有eval()這是能夠執行JavaScript字符串版本

elem.onMouseOver = 'changeColor();'; // technically legal but does nothing (just assigns a string)

：換句話說，你不能做到這一點。例如：

eval('changeColor();');

所以，現在的DOM。當你給某個屬性賦值時，右邊的是一個字符串（不是真正的javascript）。因爲它是一個字符串，幕後系統只能做類似eval()的事情。

主要的問題是，在html的情況下，你寫屬性內的東西是而不是 JavaScript，而只是一個字符串。在運行時獲取並轉換爲javascript的字符串。

而且回答你最後一個問題：「爲什麼？HTML屬性syntax(onMouseOver="changeColor;")是不允許的」，以及在技術上它是允許的。但它等效於在javascript中執行此操作：

onMouseOver = function(){ 
    eval('changeColor;'); 
}

這顯然不能完成很多操作。

來源

2015-12-15 00:36:26

在第一種情況下的回調變成這樣：

function onmouseover(event) { 
    changeColor(); 
}

VS第二種情況下，回調只是changeColor

這裏是一個例子：

<html> 
 
<body> 
 

 
<h3 id="test1" onClick="test1();"> 
 
     test1 
 
</h3> 
 

 
<h3 id="test2"> 
 
     test2 
 
</h3> 
 

 
<script> 
 
    function test1() { 
 
    console.log('test1'); 
 
    } 
 

 
    function test2() { 
 
    console.log('test2'); 
 
    } 
 

 
    document.getElementById('test2').onclick = test2; 
 

 
    console.log(document.getElementById('test1').onclick); 
 
    console.log(document.getElementById('test2').onclick); 
 
</script> 
 

 
</body> 
 
</html>

來源

2015-12-15 00:36:18

event handlers有兩種（不要與event listeners混淆）。

Event handler IDL attributes。

您可以通過爲該屬性指定一個函數引用（也稱爲IDL屬性）來將它們設置爲JS，例如，
```
myelement.onmyevent = myfunction; 
```
注意屬性名稱是小寫的。

指定的函數函數將用作事件處理程序。當調度事件時，函數將像平常一樣調用JS函數，將事件作爲第一個參數傳遞，並將當前事件目標作爲this值。
Event handler content attributes

您可以通過設置setAttribute他們無論是在HTML或JS。至於任何屬性，它的值必須是一個字符串。
```
myelement.setAttribute("onMyEvent", "some code here"); 
```
注意HTML屬性不區分大小寫。

事件處理程序將是一個internal raw uncompiled handler，它由屬性的新值和屬性設置爲此值的腳本位置組成。

當事件發出時，瀏覽器將get the current value of the event handler。彙總，這意味着：
1. 該字符串將被解析，好像它是一個功能體
2. 該函數將是全球一個，由文檔陰影，形式所有者（如果有的話）的範圍和元素（如果有的話）。

TL; DR：隨着事件處理程序IDL屬性必須指定一個函數引用，瀏覽器將調用它。使用事件處理程序內容屬性，您必須分配一個字符串，瀏覽器將其包裝在一個函數中，並會爲您調用它。

來源

2015-12-15 01:13:36 Oriol

內聯JS回調語法Vs的內部JS回調語法

回答

相關問題