javascript - 与 slim.js 绑定(bind)的过渡结束事件

Question

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

All native HTMLElement events are supported via reserved attributes, omitting the "on" prefix. A Slim element can add event listeners via template. Example https://github.com/slimjs/slim.js/wiki/Events-&-Interactivity

我有一个元素，如果添加特定类，它就会启动动画。

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

在组件中:

aaa() {
 console.log("test")
}

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

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

它有效。

我想知道为什么它不能按应有的方式工作。 ontransitionend 可能不是“本地”事件？我尝试使用 mdn 引用( https://developer.mozilla.org/en-US/docs/Web/Events )来理解这一点。但根据 slim wiki 页面的描述，我无法弄清楚哪些事件算作原生事件。

• 如何在不手动尝试的情况下找出支持哪些事件？
• 如果我想将“非 native ”事件绑定(bind)到组件中的处理程序，该怎么办？

Answer 1

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

同时，您可以只添加监听器，直到添加为止。

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

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>

希望这有帮助。