javascript - Mootools 事件触发

Question

所以这有点粗略。

免责声明：我不是 MooTools 开发人员；几乎从来没有碰过它。

我正在尝试触发 MooTools 事件。

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

我已经使用VisualEvent来了解该事件。

有没有办法

score 0 · Accepted Answer

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

您将单击事件添加到每个列表项。

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

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

});

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

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

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

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!");
    });

});

1 回答 1