在浏览器控制台中查看Ractive事件

Question

我一直在https://ractive.js.org/get-started/tutorials/events/阅读有关事件管理的RactiveJS文档，并对事件的呈现提出了疑问：

  

相反，on-directive将在渲染时使用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!' );
});