Fatal编程技术网

Javascript Dojo/on和捕获阶段

javascript dojo

Javascript Dojo/on和捕获阶段,javascript,dojo,dom-events,Javascript,Dojo,Dom Events,有没有办法用dojo/on在捕获阶段（而不是冒泡阶段）触发事件 是的，这是可能的，您可以使用方面。 尤其是在之前或周围；） 以前 该模块还包括一个before函数，用于提供before建议 使用一种方法。所提供的通知功能将在 调用main方法。before函数的签名为： 最后我在这里查找关于on（）-dojo.connect（）的前身的信息。值得一提的是，dojo.connect（）似乎不支持捕获阶段的事件侦听器。它的工作原理是将事件处理程序作为字段添加到DOM节点，例如，node[“mous

有没有办法用dojo/on在捕获阶段（而不是冒泡阶段）触发事件

是的，这是可能的，您可以使用方面。

尤其是在之前或周围；）

以前

该模块还包括一个before函数，用于提供before建议 使用一种方法。所提供的通知功能将在 调用main方法。before函数的签名为：

最后我在这里查找关于on（）-dojo.connect（）的前身的信息。值得一提的是，dojo.connect（）似乎不支持捕获阶段的事件侦听器。它的工作原理是将事件处理程序作为字段添加到DOM节点，例如，
node[“mouseclick”]=…
，因为您必须在捕获阶段使用addEventListener来接收事件，所以我的推断是dojo.connect（）无法做到这一点

您可以做的是向dom节点上的自定义对象添加一些事件侦听器，然后在这些处理程序上使用dojo.connect（）

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js.uncompressed.js"></script>
    <script type="text/javascript">
        function forwardCaptureEvent(e) {
            var listener = this.captureEventHandlers[e.type];
            if (listener != null) listener.apply(this, arguments);
        }

        function enableCaptureEvent(domNode, eventType) {
            if (domNode.captureEventHandlers == null) domNode.captureEventHandlers = {};
            var evtHandlers = domNode.captureEventHandlers;
            if (evtHandlers[eventType] == null) evtHandlers[eventType] = function(e) {};
            domNode.addEventListener(eventType, forwardCaptureEvent, true);
        }

        function logEvent(label, e) {
            dojo.byId("log").innerHTML += label + " " + e.currentTarget.id + " " + e.type + " " + [ '', 'capturing', 'target', 'bubbling' ][ e.eventPhase ] + "<br/>";
        }

        function logCaptureEvent(e) { 
            logEvent("capture phase:", e);
        }

        function logBubbleEvent(e) { 
            logEvent("bubble phase:", e);
        }

        window.onload = function () {
            enableCaptureEvent(dojo.byId("test"), "click");
            dojo.connect(dojo.byId("test").captureEventHandlers, "click", logCaptureEvent);
            dojo.connect(dojo.byId("test"), "click", logBubbleEvent);
        }
    </script>
</head>
<body>
    <div id="test" style="background: darkorange; padding: 20px;">
        <div style="background: gold; padding: 20px;">
            <div style="background: cornsilk; ">Click me.</div>
        </div>
    </div>

    <div id="log"></div>
</body>
</html>


函数forwardCaptureEvent（e）{
var listener=this.captureEventHandlers[e.type]；
if（listener！=null）listener.apply（this，arguments）；
}
函数enableCaptureEvent（domNode，eventType）{
如果（domNode.captureEventHandlers==null）domNode.captureEventHandlers={}；
var evtHandlers=domNode.captureEventHandlers；
if（evtHandlers[eventType]==null）evtHandlers[eventType]=函数（e）{}；
addEventListener（eventType，forwardCaptureEvent，true）；
}
功能日志事件（标签，e）{
dojo.byId（“log”）.innerHTML+=label+“”+e.currentTarget.id+“”+e.type++[“”，'capturing'，'target'，'bubbling'][e.eventPhase]+“
”；
}
函数logCaptureEvent（e）{
日志事件（“捕获阶段：”，e）；
}
函数logBubbleEvent（e）{
logEvent（“气泡相：”，e）；
}
window.onload=函数（）{
enableCaptureEvent（dojo.byId（“测试”），“单击”）；
connect（dojo.byId（“test”）.captureEventHandlers，“单击”，logCaptureEvent）；
connect（dojo.byId（“test”），“click”，logBubbleEvent）；
}
点击我。
因此，
enableCaptureEvent
和
forwardCaptureEvent
是我的助手函数
enableCaptureEvent
在我刚才提到的DOM节点上创建捕获事件侦听器的自定义对象，然后使用
forwardCaptureEvent
实际接收捕获事件并将它们转发给这些侦听器

然后，要使用这些帮助程序，可以使用DOM节点和要连接到的事件的名称调用
enableCaptureEvent
。然后连接到DOM节点上的自定义对象，我称之为“captureEventHandlers”。这就是我在
onload
处理程序中所做的。我还在做一个正常的
dojo.connect
，以显示这不会干扰捕获正常的气泡事件。

我认为这不会有帮助。AOP用于向对象方法添加建议方法。确切地说，您建议在这里使用哪种方法？好吧，假设他将连接到某个小部件上的“单击”事件，他可以在之前使用（targetWidget，“onClick”，function（）{//hat无论他想在这里做什么，例如检查源、目标或任何东西}）；我想知道你为什么不先确定那个家伙想要什么，就不仅投否决票，还提供虚假信息。。。也许我也应该为此否决你的意见？在调用
onClick
之前会调用通知方法，但是
onClick
直到冒泡阶段才会被调用。因为OP明确要求在捕获阶段触发事件处理程序，所以这个答案根本没有解决提出的问题。我们甚至不确定这家伙真正想要什么。。。它可能只是“在调用此事件的操作之前拦截事件的一种方式”。有趣的是，你将答案从“不可能”改为“通常不可能，但取决于……”。在这种情况下，提供可能有用的信息比简单地说“不”要好；但是，为什么要在捕获阶段尝试触发？也许有另一种方法可以达到这个目的 
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js.uncompressed.js"></script>
    <script type="text/javascript">
        function forwardCaptureEvent(e) {
            var listener = this.captureEventHandlers[e.type];
            if (listener != null) listener.apply(this, arguments);
        }

        function enableCaptureEvent(domNode, eventType) {
            if (domNode.captureEventHandlers == null) domNode.captureEventHandlers = {};
            var evtHandlers = domNode.captureEventHandlers;
            if (evtHandlers[eventType] == null) evtHandlers[eventType] = function(e) {};
            domNode.addEventListener(eventType, forwardCaptureEvent, true);
        }

        function logEvent(label, e) {
            dojo.byId("log").innerHTML += label + " " + e.currentTarget.id + " " + e.type + " " + [ '', 'capturing', 'target', 'bubbling' ][ e.eventPhase ] + "<br/>";
        }

        function logCaptureEvent(e) { 
            logEvent("capture phase:", e);
        }

        function logBubbleEvent(e) { 
            logEvent("bubble phase:", e);
        }

        window.onload = function () {
            enableCaptureEvent(dojo.byId("test"), "click");
            dojo.connect(dojo.byId("test").captureEventHandlers, "click", logCaptureEvent);
            dojo.connect(dojo.byId("test"), "click", logBubbleEvent);
        }
    </script>
</head>
<body>
    <div id="test" style="background: darkorange; padding: 20px;">
        <div style="background: gold; padding: 20px;">
            <div style="background: cornsilk; ">Click me.</div>
        </div>
    </div>

    <div id="log"></div>
</body>
</html>