数组元素的addEventListener

时间:2013-10-19 01:18:57

标签: javascript arrays svg addeventlistener

使用这段代码,我试图迭代一个从json数组派生的数组。 页面内有一个SVG。 当我点击某个国家/地区时,该名称应该提交给一个网址。 不幸的是,我在 - >错误

指示的行中收到以下错误

未捕获的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);

2 个答案:

答案 0 :(得分:1)

在尝试附加事件处理程序之前,您没有检查元素是否存在;如果该元素不存在,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
    }
}

答案 1 :(得分:0)

发生异常是因为在页面中没有给出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.join(', #')).on('mousedown', function() {
   $("#info").html(ajax_load).load("http://www.someurl.com/returnData"+"?country="+text);
});

所以基本上,假设item是一个数组(因此我称之为items),使用普通ID,如['a', 'b', 'c']'#' + item.join(', #'),您将获得"#a, #b, #c" 1}}作为传递给jQuery的字符串:如果页面中不存在这些元素,则不会附加mousedown监听器,不会引发任何错误。

注意:不确定此text变量的来源,我只是放在那里,因为在原始示例中。