Question

要知道event.data.x方法的情况有点困难。

您能告诉我什么是event.data.x在此代码下面确切地引用吗？

除function(event)这部分以外，我大部分都了解代码的工作方式，例如功能结构，参数，方法。

具有参数名为event的函数的数量吗？

如果您使用简单的单词解释这些内容，那就太好了。

plus：Jquery上的索引和数据之间有什么区别吗？

$(document).ready(function() {
  $("p").each(function(i) {
    $(this).on("click", {
      x: i
    }, function(event) {
      alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
    });
  });
});

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

$(this).index()返回您在其容器元素中单击的元素的索引。

event.data.x包含i循环中.each()的值，该值与事件侦听器所附加的元素相对应。

在此示例中，它们是相同的，因为<p>元素是容器的唯一子元素。但是，如果您稍微修改一下示例，则可以看到区别。

$(document).ready(function() {
  $("p").each(function(i) {
    $(this).on("click", {
      x: i
    }, function(event) {
      alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
    });
  });
});

<p>This is a paragraph.</p>
<div>This is a div</div>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<div>
  <p>This is a paragraph nested deeper</p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

第一个DIV是容器的另一个子代，因此会影响其后的段落的索引。并且最后一段位于另一个容器中，因此索引从那里的0开始。

但是在所有情况下，变量i只是顺序递增，并且保存在event.data.x中。

Answer 2

event.data是此行的第二个参数：

$（this）.on（“ click”， {x：i} ，函数（事件）{

这就是您声明eventHandler的方式，简单来说，您是在告诉人们单击任何<p>...</p>元素时该怎么做，因此最后一个参数是单击发生时将运行的函数。

当浏览器检测到点击时，它将使用有关刚刚发生的事件（对象，在示例中称为 event ）的一些数据运行此功能，您还可以查看该事件的其他内容对象包含在此处：https://www.w3schools.com/jsref/obj_mouseevent.asp

更多信息

您不必将其称为事件，您可以将其命名为任何东西，例如：

$(this).on("click", {
  x: i
}, function(potato) {
  console.log(potato.data) // {x:#}
});

如果不需要使用数据，则可以省略第二个参数

$(this).on("click", function(event) {
  console.log(event.data) // undefined
});

关于index vs data.x，不同之处在于 each 函数为您提供了从0开始的索引参数，而元素的index（）函数可能会为您提供

$("p").each(function(i) {
  $(this).on("click", {
    x: i
  }, function(event) {
    console.log(event.data.x) // 0...1...2...3 depending on where you clicked
    console.log($(this).index()) // 1...2...3...4 depending on where you clicked
  });
});

JavaScript中索引和数据之间的区别？

2 个答案:

更多信息