Javascript：DOM元素和對象之間的區別/「未定義不是函數」

Question

經過幾個小時的努力找出並閱讀文檔，我會放棄這一個。我來自嘗試學習Javascript的C/C++背景，我對DOM元素和Object之間的區別有些困惑。我以爲我明白了，但是當我在對象上調用某些函數時，比如「.addEventListener（）」，我會遇到着名的「未定義不是函數」錯誤，以及其他有趣的事情。所以這裏有兩個使用SVG.js的嘗試。我基本上只是試圖添加一個事件監聽器到我迄今爲止在我的SVG畫布裏面生成的每個形狀，這樣當任何形狀被點擊時，它將獨立於所有其他形狀改變顏色。

在添加事件監聽器行上，我給出了「Undefined ...」，我用第二個版本解決了這個問題，但現在我得到了函數內唯一聲明的「Undefined ...」錯誤。

您能澄清一下DOM元素和對象之間的區別嗎，然後幫助我理解爲什麼在我的第二個示例中彈出「未定義不是函數」錯誤？謝謝。

版本1：canvas.get（）返回一個對象，我已經產生的形狀中的一種，對 - 閱讀進度 - 出現錯誤（）調用第2版

function changeColor(e) { 
    this.fill({color: currentColor}); 
} 
//add event listeners for every element of SVG 
var it; 
for (it=3; it<=18; it++){ 
    var canvasName = canvas.get(it); 
    canvasName.addEventListener("click", changeColor); 
} 

：現在正在添加的事件偵聽到DOM元素和「未定義不是一個函數」的錯誤出現在聲明的函數內（第2行）

function changeColor(e) { 
    this.fill({color: currentColor}); 
} 
//add event listeners for every element of SVG 
var it; 
for (it=3; it<=18; it++){ 
    //get string to search for id in DOM 
    var idName = "SvgjsRect" + (1006+it); 
    var box = document.getElementById(idName); 
    box.addEventListener("click", changeColor); 
} 

---

我的最終版本。我意識到他們基本上放棄了所有本地DOM功能，所以我使用了他們的事件綁定方法。

var changeColor = function() { 
     this.fill({color: currentColor}); 
    } 
    //add event listeners for every element of SVG 
    var it; 
    for (it=3; it<=18; it++){ 
     var box = canvas.get(it); 
     box.on('click', changeColor); 
    } 

Answer 1

已經通過文檔的svg.js脫脂看來，它不暴露底層DOM元素可言。沒有方法返回底層的DOM對象，也沒有任何指向它的屬性。

svg.js shapes對象是底層DOM對象的包裝。 DOM和DOM元素最終在C/C++中實現，並暴露給JavaScript作爲對象。不過它們不是普通的對象，因爲它們不是用javascript實現的。例如，在大多數實現中，DOM對象沒有構造函數。

基本上，在C++方面，svg.js形狀和DOM元素之間的關係是這樣的：

class DOMElement { 
    /* DOM methods like .addEventListener() */ 
} 

class shape { // from svg.js 
    private DOMElement element; // you have no access to this 

    /* svg.js shape methods such as .fill() */ 
} 

一個工作周圍，你已經發現是使用DOM API來獲得DOM對象(document.getElementById) 。但是，然後你試圖調用DOM對象上的svg.js方法，當然這會失敗。

所以修復程序代碼的版本2是使用DOM API來設置填充：還好

function changeColor(e) { 
    .setAttribute('fill',currentColor); 
} 

，該svg.js庫還提供事件綁定方法，所以你不需要使用DOM API添加事件偵聽器。因此，另一種解決辦法是更換.addEventListener()代替：

for (it=3; it<=18; it++){ 
    var canvasName = canvas.get(it); 
    canvasName.click(changeColor); 
} 

然而，做注意，SVG。js事件偵聽器是非標準的，因爲它不會將事件對象作爲參數傳遞。所以如果你這樣做的話，你不應該有這個(e)的觀點。如果你需要使用(e)，那麼你需要使用上面的DOM API。