Javascript 使用slim.js进行transitionend事件绑定

我尝试通过slim.js中的模板添加事件处理程序

通过保留属性支持所有本机HtmleElement事件， 省略on前缀。Slim元素可以通过 样板实例

我有一个元素，如果添加了特定的类，它将启动动画

<li transitionend="aaa" bind:class="activeImg.c">
  <img bind:src="activeImg.s">
</li>

因此，永远不会调用处理程序函数。如果我尝试不使用slim：

<li ontransitionend="alert(document)" bind:class="activeImg.c">
 <img bind:src="activeImg.s">
</li>

它起作用了

我想知道为什么它没有按应有的方式工作。ontransitionend可能不是本机事件？。我试图通过mdn引用来理解这一点。但根据slim wiki页面的描述，我无法确定哪些事件算作本机事件

如何在不手动尝试的情况下找出支持哪些事件？ 如果要将非本机事件绑定到组件中的处理程序，该怎么办？

---

请在github上提交一个问题。我将把事件添加到已知事件中

同时，您可以添加侦听器，直到添加此侦听器为止

您还可以通过编写自己的自定义指令来扩展slim，以支持使用任何名称调度的任何事件

const matcher = (attr) => attr.nodeName.startsWith('evt:');
const directive = (source, target, attr) => {
  const eventName = attr.nodeName.slice(4);
  const callbackName = attr.nodeValue;
  target.addEventListener(eventName, source[callbackName].bind(source));
};

Slim.customDirective(matcher, directive); 

// usage: <li evt:ontransitionend="myFunction"></li>

希望这有帮助

const matcher = (attr) => attr.nodeName.startsWith('evt:');
const directive = (source, target, attr) => {
  const eventName = attr.nodeName.slice(4);
  const callbackName = attr.nodeValue;
  target.addEventListener(eventName, source[callbackName].bind(source));
};

Slim.customDirective(matcher, directive); 

// usage: <li evt:ontransitionend="myFunction"></li>