Javascript 数组元素的addEventListener

通过这段代码，我试图迭代一个从json数组派生的数组。 页面中有一个SVG。 当我点击一个国家时，名字应该被提交到一个URL。 不幸的是，在-->error指示的行中出现以下错误

未捕获的TypeError:无法调用null的方法“addEventListener”

我怎样才能克服这个错误？？为什么会这样

数组如下所示：

{"Countries":["india","switzerland","usa","alaska","germany","austria","netherlands","france","italy","spain","poland","hungary","czech","romania","russia","china","mexico","brazil","britain","thailand","sweden","uae","new_zealand_north_island","new_zealand_south_island","egypt"]}




var mySVG = document.getElementById("VectorMap");
var svgDoc;
mySVG.addEventListener("load", function () {
    svgDoc = mySVG.contentDocument;

    $.getJSON("http://www.someurl.com/jsonArray",
        function (data) {
            $.each(data, function (index, item) {

              var i=0;
              for (tot=item.length; i < tot; i++) {
                var someElement = svgDoc.getElementById(item[i]);
                 //--->error
                 someElement.addEventListener("mousedown", function () {
                     $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);

                 }, false);    //add behaviour
              }

            });
        });
}, false);

{“国家”：[“印度”、“瑞士”、“美国”、“阿拉斯加”、“德国”、“奥地利”、“荷兰”、“法国”、“意大利”、“西班牙”、“波兰”、“匈牙利”、“捷克”、“罗马尼亚”、“俄罗斯”、“中国”、“墨西哥”、“巴西”、“英国”、“泰国”、“瑞典”、“阿联酋”、“新西兰北岛”、“新西兰南岛”、“埃及”]]
var mySVG=document.getElementById（“VectorMap”）；
var-svgDoc；
mySVG.addEventListener（“加载”，函数（）{
svgDoc=mySVG.contentDocument；
$.getJSON（“http://www.someurl.com/jsonArray",
功能（数据）{
$。每个（数据、功能（索引、项目）{
var i=0；
对于（tot=item.length；i错误
someElement.addEventListener（“mousedown”，函数（）{
$（“#info”）.html（ajax#u load）.load（“http://www.someurl.com/returnData“+”？国家=”+文本）；
}，false）；//添加行为
}
});
});
}，假）；

在尝试附加事件处理程序之前，您没有检查元素是否存在；如果元素不存在，

getElementById（）

将返回

null

。此代码将具有该检查

var someElement;

for (var i = 0, tot = item.length; i < tot; i++) {
    someElement = svgDoc.getElementById(item[i]);

    if (someElement) {
        someElement.addEventListener("mousedown", function () {
           $("#info")
              .html(ajax_load)
              .load("http://www.someurl.com/returnData"+"?country="+text);    
        }, false);    //add behaviour
    }
}

var-someElement；
对于（变量i=0，tot=item.length；i

发生异常是因为页面中没有具有给定id的元素。在这种情况下，

getElementById

返回

null

：您可以通过浏览器中的web控制台/调试器检查不存在的

id

是什么，以及它是否应该存在–因此您有错误或打字错误

无论如何，您可以利用jQuery。因为在jQuery中，您可以传递ID列表，并且侦听器将只附加到页面中实际存在的元素，而不会引发异常。因此，在您的情况下，而不是：

var i=0;
for (tot=item.length; i < tot; i++) {
  var someElement = svgDoc.getElementById(item[i]);
   //--->error
   someElement.addEventListener("mousedown", function () {
       $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);

   }, false);    //add behaviour
} 

因此，基本上，假设

item

是一个数组（因此我称之为

items

），带有简单的ID，比如

['a'，'b'，'c']

，带有

'.\item.+item.join（'，#'）

，您将获得

“\a，#b，#c”

，作为字符串传递给jQuery：如果这些元素中没有任何元素，mousedown侦听器不会被附加，不会引发任何错误

注意：不确定这个

text

变量来自哪里，我只是放在那里，因为在您最初的示例中

$('#' + item.join(', #')).on('mousedown', function() {
   $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);
});