Я пытаюсь понять, как выглядят события, возникающие в световой модели DOM, полученные в теневой модели DOM через элемент <content>. Я читаю Shadow DOM W3C Draft и не полностью понимаю это, но похоже, что события должны быть «перенаправлены» с точки зрения вложения EventListener.
В случаях, когда путь события проходит через несколько деревьев узлов, информация о событии о цели события корректируется, чтобы поддерживать инкапсуляцию. Ретаргетинг событий - это процесс вычисления относительных целей для каждого предка узла, на котором отправлено событие. Относительная цель - это узел, который наиболее точно представляет цель отправленного события для данного предка при сохранении инкапсуляции.
а также
Во время отправки события:
- Атрибуты Event target и currentTarget должны возвращать относительную цель для узла, на котором вызываются прослушиватели событий.
Итак, вот простой настраиваемый элемент Polymer, который просто помещает своих дочерних элементов в контейнер и добавляет к контейнеру прослушиватель событий щелчка (в теневой 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>
Когда я запускаю это в Chrome 38.0.2075.0 canary, когда я нажимаю кнопку, я получаю:
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 находился элемент source. Я ожидал получить цель из теневой DOM в обоих случаях, потому что там EventListener прилагается. Мои вопросы:
- Так ли это должно работать, и
- Если да, то есть ли альтернативный способ получить события, которые всплывают из светлого DOM, перенаправленного на теневой DOM?
В случае, если кто-то хочет спросить: «Что вы пытаетесь сделать?», Я не пытаюсь делать что-то конкретное, кроме как понять поведение.
