使用NameNodeMap从事件侦听器目标获取属性

Getting attributes from Event Listener target using the NameNodeMap

本文关键字：目标 获取 属性 侦听器 事件 NameNodeMap 使用      更新时间：2023-09-26

我有一个包装在div中的图像库。我没有将onclick事件分配给有限的图像列表，而是将onclick分配给包装器div。图像信息由ajax调用提供，我循环处理响应数据，创建HTML，并将其注入包装器div。现在，每个图像都包含稍后用于传递到灯箱/模式窗口的属性。一切都很好，但随着为每个图像添加更多属性，我注意到在使用IE或Firefox开发工具检查图像时，属性的顺序有所不同。该顺序保留在Chrome和旧版本的IE中，并创建complete="complete"属性。这当然破坏了我的JavaScript代码。

因此，由于浏览器的解析器，我无法再回复定位。我这样输出我的HTML：

<img src="abcSmall.jpg" alt="Some Flowers" data-username="Mr Sausage" data-bigPhotoUrl="abcBig.jpg" data-UserId="31333205" photoUploadDate="25/05/2014">

但在Firefox和IE中，这是

<img data-bigPhotoUrl="abcBig.jpg" data-username="Mr Sausage" alt="Some Flowers" data-UserId="31333205" photoUploadDate="25/05/2014" src="abcSmall.jpg">

因此，我获取以下属性值的方法现在在IE和Firefox 中毫无用处

if(event.target.nodeName === 'IMG') {
      // this is src - event.target.attributes[0].value
      // this is alt - event.target.attributes[1].value
      // this is username - event.target.attributes[2].value
      // this is bigPhotoUrl - event.target.attributes[3].value
      // this is userId - event.target.attributes[4].value
      // this is photoUploadDate - event.target.attributes[5].value 
      // now i create HTML Nodes and Elements to pass as contents of a modal window using the items above
    }

所以我现在必须循环遍历event.target.attributes的NamedNodeMap，但是我不确定创建一个具有html属性名称并获取属性值的变量的最佳方式是什么。老实说，我无法确定NamedNodeMap是数组还是对象？有人对循环使用event.target.attributes的NamedNodeMap和创建JS变量有什么建议吗？或者有没有更好的方法让我从Javascript代码中获得这些，使用event.target["data-username"]似乎会返回'undefined'

如果我的措辞真的很糟糕，请这样说，我会修改这个问题。

尝试

$("#wrapper").on("click", function(event) {
  if (event.target.nodeName === 'IMG') {
    var attrs = {};
    $.map([].map.call(event.target.attributes, function(_attr) {
      return [_attr.name, _attr.value]
    }), function(v) {
      var value = ["src", "alt", "username"
                   ,"bigPhotoUrl", "userId"
                   , "photoUploadDate"]
      , name = $.grep(value, function(val, idx) {
          return val.toLowerCase() === v[0].replace(/data-/, "")
        })[0];
      return attrs[name] = v[1]
    });
    // `attrs` : object having `key` : `attributes.name` ,
    // `value` : `attributes.value`
    // console.log(attrs)
  };
});


$("#wrapper").on("click", function(event) {
  if (event.target.nodeName === 'IMG') {
    var attrs = {};
    $.map([].map.call(event.target.attributes, function(_attr) {
      return [_attr.name, _attr.value]
    }), function(v, k) {
      var value = ["src", "alt", "username"
                   ,"bigPhotoUrl", "userId"
                   , "photoUploadDate"],
        name = $.grep(value, function(val, idx) {
          return val.toLowerCase() === v[0].replace(/data-/, "")
        })[0];
      return attrs[name] = v[1]
    });
    $("pre").append("<br />" + JSON.stringify(attrs, null, 4))
  };
});
div {
  border: 4px solid red;
  width: 100px;
  height: 100px;
}
img {
  width: 100px;
  height: 100px;
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
click image
<br />
<div id="wrapper" title="click">
  <img data-bigPhotoUrl="abcBig.jpg" data-username="Mr Sausage" alt="Some Flowers" data-UserId="31333205" photoUploadDate="25/05/2014" src="abcSmall.jpg" />
</div>
<pre></pre>

相关文章：