Mootools事件解雇

Question

所以这有点粗略。

免责声明：我不是MooTools的开发者;几乎从未接触过它。

我正试图解雇MooTools事件。

我有一个时间跟踪网格，我试图使用JavaScript书签在AtTask中自动填充。我写它是为了将数字插入到页面上的输入元素中，但我遇到的问题是因为我通过JS插入值，事件不会触发MooTools已安排，因此无法识别更改。结果是，当我尝试保存页面时，没有保存任何值。

我使用VisualEvent来了解该事件。

有没有办法

Answer 1

所以，我们现在说你有一个列表，你的网页看起来有点像这样：

• 一
• 两个
• 三

您可以为每个列表项添加点击事件。

$$('.list-item').addEvent('click', function(e) {

    console.log("You clicked me!");

});

让我们加粗这些项目，以便我们可以通过粗体显示响应点击事件的内容来可视化正在发生的事情。

• <强>一
• 的两个
• 的三

现在，如果我们添加了一些项目，我们的列表将如下所示，因为事件不会自动附加到新元素：

• <强>一
• 的两个
• 的三
• 四
• 五

这个问题通过一个叫做事件委托的东西来解决。

JavaScript事件“bubble”，这意味着它们会继续通过事件目标的父节点。由于事件目标附加到事件，因此可以将事件附加到外部父元素，外部父元素检查事件目标是否与所选择的选择器匹配。

因此，我们不是为每个列表 item 附加一堆事件，而是将一个事件添加到整个列表，这只会在列表中触发项目已被点击。

我们可以使用MooTools的事件委托语法（确实不是有史以来最好的界面）来做到这一点。

让我们将事件处理程序移动到父元素而不是单独的每个项目上。

$('myList').addEvent('click', function() {

   console.log("You clicked somewhere on my list!");

}

现在，即使用户点击父级内的任何位置，而不仅仅是列表项目，也会发生这种情况。为了限制发生的事情，我们使用MooTools的事件委托语法（这当然很奇怪）。

$('myList').addEvent('click:relay(.item)', function() {

   console.log("You clicked on a list item!");

}

您还可以使用Eve.js，这是一个在MooTools之上运行的范围事件委派框架。

Eve中的代码看起来像这样：

Eve.scope('#myList', function() {

    this.listen('click', '.item', function() {
        console.log("You clicked on a list item!");
    });

});