Dojo / on和捕获阶段 [英] Dojo/on and the capture phase
问题描述
是否可以通过dojo / on在捕获阶段（而不是冒泡阶段）触发事件？
Is there a way to trigger an event in the capture phase (instead of the bubbling phase) with dojo/on?
推荐答案
我最终在这里寻找有关on（）-dojo.connect（）的前身的信息。值得一提的是，dojo.connect（）似乎不支持捕获阶段的事件侦听器。它通过将事件处理程序作为字段添加到DOM节点来工作，例如， node [ mouseclick] = ... 因为您必须使用addEventListener来接收事件在捕获阶段，我的推断是dojo.connect（）无法做到这一点。
I ended up here looking for info on the predecessor of on() - dojo.connect(). For what it's worth, dojo.connect() does not appear to support event listeners for the capture phase. It works by adding the event handler to the DOM node as a field, e.g., node["mouseclick"] = ... Since you have to use addEventListener to receive events during the capture phase, my deduction is that dojo.connect() can't do it.
您可以做的是向dom上的自定义对象添加一些事件侦听器
What you can do is add some event listeners to a custom object on the dom node and then use dojo.connect() on those handlers.
<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>
所以这里 enableCaptureEvent 和 forwardCaptureEvent 是我的帮助函数。 enableCaptureEvent 在我正在谈论的DOM节点上创建捕获事件侦听器的自定义对象，然后 forwardCaptureEvent 用于实际接收到捕获事件并将其转发给这些侦听器。
So here enableCaptureEvent and forwardCaptureEvent are my helper functions. enableCaptureEvent creates the custom object of capture event listeners on the DOM node that I was talking about and then forwardCaptureEvent is used to actually receive the capture events and forward them to these listeners.
然后使用这些帮助器，您可以调用 enableCaptureEvent DOM节点以及您要连接的事件的名称。然后连接到它，您连接到我称为 captureEventHandlers的DOM节点上的自定义对象。这就是我在 onload 处理程序中所做的事情。我也在做普通的 dojo.connect ，以表明这不会影响捕获正常的泡沫事件。
Then to use these helpers, you call enableCaptureEvent with a DOM node and the name of the event you want to connect to. Then to connect to it, you connect to the custom object on the DOM node which I called "captureEventHandlers". This is what I'm doing in the onload handler. I'm also doing a normal dojo.connect to show this doesn't interfere with catching normal bubble events.
这篇关于Dojo / on和捕获阶段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
