我正在尝试理解从Light DOM发起的事件在通过
当我在谷歌浏览器38.0.2075.0的金丝雀版本上运行此代码时,当我点击按钮时,会出现以下结果:
<content>
元素接收到Shadow DOM后的情况。我正在阅读Shadow DOM W3C Draft,但我并不完全理解,但它似乎表明事件需要从EventListener附加的角度进行“重新定向”。
在事件路径跨越多个节点树的情况下,事件对事件目标的信息进行调整以保持封装性。事件重定向是计算派发事件节点祖先的相对目标的过程。相对目标是在给定祖先处最准确地表示派发事件目标的节点,同时保持封装性。
以及
事件派发时:
- 事件目标和currentTarget属性必须返回在调用事件侦听器的节点上的相对目标
因此,这里有一个简单的Polymer自定义元素,它只是将其子项放入容器中,并将click事件侦听器添加到容器中(位于shadow DOM中)。在这种情况下,子项是一个按钮。
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body unresolved>
<polymer-element name="foo-bar">
<template>
<div id="internal-container" style="background-color:red; width:100%;">
<content></content>
</div>
</template>
<script>
Polymer("foo-bar", {
clickHandler: function(event) {
console.log(event);
var element = event.target;
while (element) {
console.log(element.tagName, element.id);
element = element.parentElement;
}
},
ready: function() {
this.shadowRoot.querySelector('#internal-container').addEventListener('click', this.clickHandler);
}
});
</script>
</polymer-element>
<foo-bar id="custom-element">
<button>Click me</button>
</foo-bar>
</body>
</html>
当我在谷歌浏览器38.0.2075.0的金丝雀版本上运行此代码时,当我点击按钮时,会出现以下结果:
MouseEvent {dataTransfer: null, toElement: button, fromElement: null, y: 19, x: 53…}altKey: falsebubbles: truebutton: 0cancelBubble: falsecancelable: truecharCode: 0clientX: 53clientY: 19clipboardData: undefinedctrlKey: falsecurrentTarget: nulldataTransfer: nulldefaultPrevented: falsedetail: 1eventPhase: 0fromElement: nullkeyCode: 0layerX: 53layerY: 19metaKey: falsemovementX: 0movementY: 0offsetX: 45offsetY: 10pageX: 53pageY: 19path: NodeList[0]relatedTarget: nullreturnValue: truescreenX: 472screenY: 113shiftKey: falsesrcElement: buttontarget: buttontimeStamp: 1404078533176toElement: buttontype: "click"view: WindowwebkitMovementX: 0webkitMovementY: 0which: 1x: 53y: 19__proto__: MouseEvent test.html:17
BUTTON test.html:20
FOO-BAR custom-element test.html:20
BODY test.html:20
HTML test.html:20
当我点击容器时,我会得到:
MouseEvent {dataTransfer: null, toElement: div#internal-container, fromElement: null, y: 15, x: 82…} test.html:17
DIV internal-container test.html:20
根据源元素所在的DOM,我会在光影DOM中获取事件目标。我原本期望在两种情况下都从影子DOM中获取目标,因为事件监听器是附加在那里的。我的问题是:
- 这是预期的工作方式吗?
- 如果是,有没有其他方法可以将从光DOM冒泡的事件重新定位到影子DOM?
如果有人想问:“你想做什么?”我并没有特别想做什么,只是想理解这种行为。
<content>
元素传递的事件被重新定位。只是为了再次明确,您是否在说符合规范的阴影DOM侦听器可以从其主机的DOM以及其自己的DOM接收事件目标? - rhashimoto