Javascript:DOM元素和对象之间的差异；“未定义”不是一个函数；

经过几个小时的努力和阅读文档，我将放弃这一点。我来自C/C++背景，试图学习Javascript，我对DOM元素和对象之间的区别有点困惑。我想我理解了，但是当我调用对象上的某些函数时，比如“.addEventListener（）”我得到了著名的“Undefined is not a function”错误，以及其他有趣的事情。因此，这里使用SVG.js进行了两次尝试。基本上，我只是尝试将事件侦听器添加到迄今为止我在SVG画布中生成的每个形状中，这样，当单击任何形状时，它将独立于所有其他形状而改变颜色

其中一个在addeventlistener行中给出了“Undefined…”，我用第二个版本解决了这个问题，但是现在我在函数内部的唯一声明中得到了“Undefined…”错误

您能否澄清DOM元素和对象之间的区别，然后帮助我理解为什么在我的第二个示例中会出现“Undefined is not a function”错误？谢谢

版本1:canvas.get（）返回一个对象，即我生成的形状之一，错误出现在.addEventListener（）调用上

函数更改颜色（e）{
this.fill（{color:currentColor}）；
}
//为SVG的每个元素添加事件监听器
var-it；
对于（it=3；it浏览了svg.js的文档后，它似乎根本没有公开底层DOM元素。没有返回底层DOM对象的方法，也没有指向它的任何属性

svg.js
shapes
对象是围绕底层DOM对象的包装。DOM和DOM元素最终在C/C++中实现，并作为对象公开给javascript。但它们不是普通对象，因为它们不是用javascript实现的。例如，在大多数实现中，DOM对象没有构造函数美国

基本上，在C++术语中，S.G.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);
}

for（it=3；it changeColor中的“this”关键字并不指您认为它做了什么……定义了fill方法的对象是什么？在svg.js中，为所有形状原型（Rect、Circle等）定义了.fill（）函数.看看它，我不认为我在版本2中传递的是shape对象，而是DOM引用，所以可能就是它，但它不允许我向对象本身添加事件处理程序，所以不知道解决方法…使用console.log打印出对象，并看到for onclick为null。它不应该与funct配对吗离子？如果它没有配对，它是如何进入changeColor（）？我强烈建议您阅读svg.js文档：。为了回答这个问题，我只是浏览了一下，因此只需进行查找就可以回答您可能遇到的大多数问题。感谢您的解释，这是有道理的，我一直在阅读库的文档，但错过了我想的事件处理。我将用现在正在使用的解决方案来回答您的问题帮助其他任何人，但我如何才能为您的贡献提供信用？在2k18中，您可以使用
element.on（'eventName'，fn）
以防有人无意中发现此问题。no Ofc on方法是在svg.js对象上定义的，而不是在Dom元素上定义的。请使用svg.js的包装器元素。当您使用svg.ja库时，其他任何人都没有意义
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() */
}

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

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