javascript - 在 NodeList.connect() 注册的事件内部，如何获取对触发节点的引用？

Question

简式问题

我正在执行 dojo.query()并使用 NodeList.onmouseenter() 将事件处理程序应用于所有返回的节点功能。但是，当这些节点之一触发事件时，我需要知道它是哪一个，以便我可以从该特定节点的位置遍历 DOM。我如何在触发时获取特定节点的引用？

具有完整上下文的长式问题

我正在尝试调整 jQuery 驱动的导航菜单 ( see overview and complete source ) 以在 Dojo 环境中工作。简而言之，HTML 看起来像这样:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">   <!-- This CSS class hides the <ul> on page load -->
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
        <span></span>         <!-- CSS fills the <span> with an image -->
    </li>
    ...

最外层<ul>标签代表整个导航菜单......和嵌套的<ul>标签是菜单项具有下拉子菜单的地方。这样的菜单项也有一个 <span>标记在那里，以显示箭头图像并使在 DOM 遍历期间更容易识别。

因此，jQuery 代码为所有这些 <span> 添加了一个事件处理程序标签。上面的教程链接使用“onClick”，但我打算将其更改为悬停(即“onmouseenter”和“onmouseleave”)。无论哪种方式，事件触发器都会导致隐藏的子菜单显示为 jQuery“slideDown”效果(相当于 Dojo 的“wipeIn”)。

$("ul.topnav li span").click(function() { 
    $(this).parent().find("ul.subnav").slideDown('fast').show();
});

从<span>得到到嵌套的 <ul> ，事件处理程序向上爬取 DOM 一级，然后向下爬取一级...从 $(this) 开始. 在 Dojo 中，这部分让我很不爽!我已经尝试了数十种变体，但这是我当前的(损坏的)代码:

dojo.require("dojo.fx");
dojo.require("dojo.NodeList-traverse");
dojo.require("dojo.NodeList-manipulate");
dojo.ready(function(){

    dojo.query("ul.topnav li span").onmouseenter(function(node) {
        node.siblings("ul.subnav").wipeIn().play();
    });

}

道场内部 NodeList事件连接函数(例如 onmouseenter )，我不知道如何获取对被触发节点的触发时间引用。我传递给“onmouseenter”的匿名函数采用名为“node”的参数，但这只是我的一厢情愿。 Dojo 并没有真正传递这样的引用。

我需要的是 $(this) 的等价物在上述 jQuery 片段的第二行。对事件触发的特定节点的引用，以便我可以从该特定节点的位置遍历 DOM。有没有一种简单的方法可以使用 Dojo 的 NodeList 来做到这一点？我只是想念？

Answer 1

IIRC，onmouseenter 回调不接收节点作为参数，而是接收事件对象。如果是这种情况，您可以尝试:

1. 通过其他方式获取节点，(evt.currTarget 或类似的东西，我总是对这些感到困惑...)

2. 改为使用 forEach，获取对节点的引用，然后手动进行事件连接:

    dojo.query('blabla').forEach(function(node){
        dojo.connect(node, 'onmouseenter', function(evt){
            //node should point to wat you want now
            node.siblings("ul.subnav").wipeIn().play();
        });
    });