Почему stopPropagation принимает параметр события в обратном вызове вместо использования "this"?

Question

Я не понимаю, почему при использовании stopPropagation() или же stopDefault() с помощью jQuery необходимо ввести параметр для обратного вызова в функции обработчика событий. Как браузер узнает, что передать этой функции? Кроме того, почему не использует this Работа?

Вот код, который работает. Я выделил жирным шрифтом / звездочкой ту часть, которая сбивает с толку:

$(document).ready(function() {
   $(".see-photos").on("click", function(**event**) {
    event.stopPropagation();
    $(this).closest(".tour").find(".photos").slideToggle();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

Для меня это будет иметь больше смысла таким образом. Заметки нет event параметр для обратного вызова в функции обработчика.

$(document).ready(function() {
  $(".see-photos").on("click", function() {
    $(this).stopPropagation();
    $(this).closest(".tour").find(".photos").slideToggle();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

Answer 1

Это потому что jQuerys .on() Функция передает элемент, с которого было запущено событие, как this, а не само событие.

Если вы попытаетесь сделать следующее:

$('a').on('click', function () {
   console.log(this);
});

Вы увидите в своей консоли <a> тег, на который нажали. Это применимо как к DOM click событие, а также JQuery. Вы также можете увидеть это <a> тег от event.target.*

Если вы хотите получить информацию о событии, вам нужно добавить ее в свою функцию, как вы это сделали в своем вопросе:

$('a').on('click', function (event) {
    console.log(event);
});

Таким образом, вся информация о вашем мероприятии находится в event, Аналогично, логично, что вы перестанете распространять само событие, так как элемент нигде не распространяется.

Что, как говорится, this а также event.target не одинаковы