Mootools事件触发

Question

所以这是有点粗略的。

免责声明:我不是MooTools开发人员，几乎从来没有接触过它。

我正在尝试激发一个MooTools事件。

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

我已经使用VisualEvent了解了这一事件。

有没有办法

Answer 1

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

• One
• Two
• Three

您可以向每个列表项添加一个单击事件。

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

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

});

让我们将这些项加粗，这样我们就可以通过加粗将响应单击事件的项来可视化正在发生的事情。

• One
• Two
• Three

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

• One
• Two
• Three
• Four
• Five

这个问题是通过事件委托来解决的。

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

因此，我们不是附加一堆事件，每个事件对应一个列表项，而是将单个事件添加到整个列表中，该事件仅在单击列表项时触发。

我们可以使用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!");
    });

});