有没有办法用 famo.us 侦听具有特定类的 DOM 元素上的事件

Is there a way to listen for an event on a DOM element with a particular class with famo.us

本文关键字：DOM 事件 元素 famo us 有没有      更新时间：2023-09-26

我正在尝试以与jQuery .on listner类似的方式收听著名的DOM元素事件。基本上我正在尝试用 famo.us 做到这一点

var surface = new Surface({content: '<div>' +
                                     '<button class="close">Close</button>'             
                                     '<button class"edit">Edit</button>' +
                                    '</div>'});
surface.on("click", ".edit", function () {
    console.log("edit button has been clicked");
});

显然，它在 famo.us 中不是这样工作的，因为你不能起诉选择器作为第二个参数，但我想知道我将如何处理 famo.us 这种情况。

在 Famo.us 中，EventHandler.on 方法只接受两个参数：

EventHandler.prototype.on = function on(type, handler)

据我所知，您可以采取两种选择来完成此操作。

  1. 将jQuery注入到您的项目中，然后在EventHandler捕获"click"之后使用选择器（实际上不是首选）
  2. 重写 EventHandler 方法并编写选择器用法代码

我了解您在寻找什么，但如果您使用的是纯 Famo.us 代码，我会建议不同的设置。我建议不要创建一个部分HTML块来放入内容，而是为ContainerSurface中的每个按钮放置单独的表面。您将获得类似的 HTML 输出，但每个表面上都具有 Famo.us 的所有功能。我在下面为您整理了一小段。希望这有所帮助。

var buttonContainer = new ContainerSurface({
    classes: ['editbuttons']
});
var deleteButton = Surface({
    classes: ['delete']
});
var deleteButtonModifier = new Modifier();
var editButton = Surface({
    classes: ['edit']
});
var editButtonModifier = new Modifier();
buttonContainer.add(deleteButtonModifier).add(deleteButton);
buttonContainer.add(editButtonModifier).add(editButton);
deleteButton.on('click',function() {
    // Event code
});
editButton.on('click',function() {
    // Event code
});
相关文章：