Разница между индексом и данными в JavaScript?

Question

Немного сложно понять, что происходит с event.data.x методами.

Не могли бы вы сказать мне, что событие.data.x точно ссылается под этим кодом?

Я в основном понял, каккод работает, например, структуры функций, параметры, методы, кроме этой function(event) части.

Это номер функции, у которой есть параметр с именем event?

Было бы здорово, если бы вы объяснилите, которые используют простые слова.

плюс: есть ли разница между индексом и данными в 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

event.data - второй параметр этой строки:

$ (this) .on ("щелчок", {x: i} , функция (событие){

Так вы объявляете eventHandler, простыми словами, вы говорите, что делать, когда кто-то щелкает по любому элементу <p>...</p>, поэтому последний параметр - это функция, которая будет выполняться при нажатиислучается.

Когда браузер обнаруживает щелчок, он запускает эту функцию с некоторыми данными о только что произошедшем событии, объект, который в примере, который вы называете событие , вы можете проверитьчто еще содержит этот объект: 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
});

Об индексе против data.x, разница в том, что каждый функция, дает вам индексный параметр, начинающийся с 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
  });
});

Answer 2

$(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.