Просмотр Ractive событий в консоли браузера

Question

Я читал документы RactiveJS по управлению событиями по адресу https://ractive.js.org/get-started/tutorials/events/, и у меня возник вопрос по поводу рендеринга событий:

Вместо этого директива on будет привязывать общий обратный вызов непосредственно к элементу, используя addEventListener, когда он будет визуализирован.

Можно ли увидеть, как будет выглядеть визуализированное событие? Я знаю, что он не будет отображаться в консоли, но было бы неплохо посмотреть, есть ли способ просмотреть пример того, как будет отображаться визуализированное событие.

Answer 1

Что эта часть учебников хотела сказать, что on-* директива вообще не отображает встроенный JS и не отображает в DOM. Это директива, которая просто сигнализирует Ractive, что делать. Даже если шаблон выглядит так:

<button on-click="@global.alert( 'Activating!' )">Activate!</button>

В DOM появляется кнопка с обработчиком событий.

<button>Activate!</button>

Под капотом on-* обрабатывается из проанализированного шаблона и преобразуется во что-то похожее на следующее:

buttonReference.addEventListener('click', function(){
  theGlobalDependingOnTheEnv.alert( 'Activating!' );
});