Javascript: DOM元素和对象之间的区别/“未定义的不是函数”
经过几个小时的努力解决这个问题和阅读文档，我将放弃这一个。我来自C/C++背景，试图学习Javascript，我对DOM元素和对象之间的区别感到有点困惑。我以为我能理解，但是当我在对象上调用某些函数时，比如".addEventListener()“，我得到了著名的”未定义函数不是函数“错误，还有其他一些有趣的事情。因此，这里有两次使用SVG.js的尝试。我基本上只是尝试在SVG画布中生成的每个形状中添加一个事件侦听器，这样当单击任何形状时，它都会改变颜色，而不依赖于所有其他形状。
一个给了我“未定义的.”在add事件侦听器行上，我用第二个版本解决了这个问题，但现在我得到了“未定义的.”函数中唯一的声明出错。
您能否澄清DOM元素与对象之间的区别，然后帮助我理解为什么在我的第二个示例中出现了“未定义的不是函数”错误？谢谢。
版本1: canvas.get()返回一个对象，这是我生成的形状之一，错误出现在.addEventListener()调用上
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);
}版本2:事件侦听器现在被添加到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);
}回答 1
Stack Overflow用户
发布于 2015-06-30 05:40:01
在浏览了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来获取DOM对象(document.getElementById)。但是，您试图在DOM对象上调用一个svg.js方法，这当然会失败。
因此，您的代码版本2的修正是使用DOM来设置fill：
function changeColor(e) {
.setAttribute('fill',currentColor);
}幸运的是，svg.js库还提供了事件绑定方法，因此不需要使用DOM来添加事件侦听器。因此，另一种解决方案是取代.addEventListener()：
for (it=3; it<=18; it++){
var canvasName = canvas.get(it);
canvasName.click(changeColor);
}但是，请注意，svg.js事件侦听器是不标准的，因为它不将事件对象作为参数传递。所以如果你要这么做的话，你不应该有那个(e)论点。如果您需要使用(e)，那么您需要使用上面的DOM。
https://stackoverflow.com/questions/31127999
复制相似问题
腾讯云开发者
