Question

我的JavaScript代码如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="#" onClick="openNav()">footer tray</a>
<br>
<br>
<br>

<div id="footerNav" class="footerbar">
  <table width="100%" border="0">
    <tr>
      <td>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
      </td>
      <td>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
      </td>
      <td>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
        <a href="#">Stuff</a>
      </td>
    </tr>
  </table>
</div>

现在当我点击$.getJSON( "sample_json.json", function( data ) { //javascript object var someId = data['item'][0]['id']; console.log("Outside addEventListener "+someId); //create <tr> element var tr = document.createElement('tr'); //bind click event tr.addEventListener("click",function() { console.log("inside addEventListener "+someId); someFunction(someId); },false); }); //function function someFunction(someId){ console.log("Inside someFunction "+someId); }元素时，它会在输出中给出以下内容

<tr>

当我将Outside addEventListener 150 Inside addEventListener 1 Inside someFunction 1更改为

时

someId

完美无缺

var someId = 150;

我应该在javascript代码中更改什么才能从点击事件的javascript对象中获取实际ID？

注意：我已经在Stack Overflow上引用了现有的问题。 How to pass arguments to addEventListener listener function? 但没多大帮助。

编辑：使用一些jquery函数更新了javascript代码，从JSON文件创建了Outside addEventListener 150 Inside addEventListener 150 Inside someFunction 150 javascript对象。

Answer 1

也许你正在将程序中的someId更改为1，这就是事件处理程序打印1而不是150的原因。如果在事件处理函数周围创建一个闭包，则可以将someId绑定到创建事件处理函数时的值（150）。您可以创建一个这样的闭包：

tr.addEventListener("click",(function(someId)
{
    return function() {
     console.log("inside addEventListener "+someId);
     someFunction(someId);
    }
})(someId),false);

Answer 2

我建议您使用data-attribute

，而不是将对象作为参数传递

$.getJSON( "sample_json.json", function( data ) {
  //javascript object
  var someId = data['item'][0]['id'];
  console.log("Outside addEventListener "+someId);

  //create <tr> element
  var tr = document.createElement('tr');

  tr.setAttribute('data-someId', someId);

  //bind click event
  $('tr').on("click",function() {
    console.log("inside addEventListener "+$(this).data('someId'));
    someFunction($(this).data('someId'));
  },false);       
});

//function
function someFunction(someId){
  console.log("Inside someFunction "+someId);
}

希望这会对你有所帮助。

JavaScript：如何将对象作为参数传递给addEventListener函数？

2 个答案: