Question

我一直在积极地重新创建作为首映JS库的基础的工具，以更好地提高我的技能。目前我正在开发功能数据绑定la Angular。

数据绑定的想法是获取数据并将其绑定到元素，以便在操作时，所有订阅的元素都将相应地更改。我已经开始工作，但我没有考虑过的一件事是innerHTML vs value的问题。根据您需要更改其中一个元素的元素（在上面的演示中，您将看到我需要在条件语句中专门挑出按钮元素，因为它有两个，但这是一种边缘情况）

问题在于，为了捕获SPAN标记更新，我需要触发事件发生，并且最容易操作Text Boxes / Textareas的是'keyup'。

在我的函数中，如果你传入一个没有value属性的元素，我们假设你将更新innerHTML，我们设置一个观察者来确定元素是否会发生变异，如果它曾经变异，那么观察者将发出'keyup'事件。

  if (watchee.value == void(0)) {
var keyUpEvent = new Event('keyup');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    watchee.dispatchEvent(keyUpEvent);
  });
});
observer.observe(watchee, {
  childList: true
});
}

现在它可能只是我的偏执狂，但似乎我可能通过伪造'keyup'来解决一个本身没有这种支持的元素上的蠕虫病毒。

TLDR：

我很好奇是否有其他方法可以制作，a.e。除了伪造'keyup'/'keydown'/'change'事件之外，span标签是否有效？例如，有没有一种方法可以创建我自己的纯事件（纯粹我的意思是不依赖于其他事件）来检查innerHTML或值是否已经改变然后执行一个函数？我知道这可能是一个计时器，但我觉得这可能会妨碍性能。

编辑：只是暂且不说。在演示中，名为hookFrom的函数通过获取DOM节点并返回将接收dom节点的函数并继续返回将接收额外接收dom节点的函数来工作。：

hookFrom(sender)(receiver);
hookFrom(sender)(receiver)(receiver2);
hookFrom(sender)(receiver)(receiver2)(receiver3)(receiver4)...(receiver999)...etc

JS Fiddle To Demo (same as above)

Answer 1

在没有本机功能的DOM节点上创建类似事件没有任何内在错误。事实上，在尝试为不同的浏览器和平台填充功能时，很多情况都会发生这种情况。

执行此类DOM魔术的唯一问题是它可能导致其他事件的冗余。例如，本文中给出的示例：https://davidwalsh.name/dont-trigger-real-event-names显示了使用相同事件名称的新建事件如何导致问题。

这个建议很有用，但在这个特定情况下可以忽略不计。代码在文本框，div，跨度等之间添加相同的功能......并且它们都是以相同的方式有意地处理的，并且如果事件将冒泡到另一个事件，那么它将是故意的并计划好了。

简而言之：有一种蠕虫可以在伪造已明确定义的事件名称时进入隧道，但在这种情况下，代码很好！

虚假触发事件的替代方法

1 个答案: