dojo 在NodeList.connect()注册的事件内部,如何获取对触发节点的引用?

a0x5cqrl  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(135)

简短问题

我正在执行dojo.query(),并使用NodeList.onmouseenter()函数对所有返回的节点应用一个事件处理程序。但是,当其中一个节点触发事件时,我需要知道是哪个节点,以便从该特定节点的位置遍历DOM。我如何在触发时获得对该特定节点的引用?

包含完整上下文的长格式问题

我正在尝试将jQuery支持的导航菜单(see overview and complete source)应用到Dojo环境中。

<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>,事件处理程序从$(this)开始向上爬一层DOM,然后向下爬一层DOM。***这是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();
    });

}

在Dojo的NodeList事件连接函数(例如onmouseenter)中,我不知道如何获得对被触发节点的触发时引用。我传递给“onmouseenter“的匿名函数接受一个名为“node“的参数,但这只是我的一厢情愿。Dojo并没有真正传递这样的引用。
我需要的是上面jQuery代码片段第二行中$(this)的等价物,即对事件触发的特定节点的引用,这样我就可以从该特定节点的位置遍历DOM。有没有一种简单的方法可以使用Dojo的NodeList来完成这一任务?

wnvonmuf

wnvonmuf1#

在IIRC中,onmouseenter回调函数不接收节点作为参数,而是接收事件对象。如果是这种情况,您可以尝试:
1.通过其他方式获取节点,(evt.currTarget或类似的东西,我总是与这些混淆...)
1.改为使用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();
     });
 });
wlsrxk51

wlsrxk512#

您可以获得的节点的最佳引用是节点本身,包括其ID。在触发时,“this”是节点,您可以使用它获得所有内容,尤其是其ID,其中:this.id.

dojo.query(".anyClass").connect(Mouse.enter, function(evt){
   var xId=this.id;
   console.log("You entered element "+xId);
});

相关问题