[英]How to listen for custom events defined web component
I have a custom element my-checkbox
that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent
named check within my constructor, like so: 我有一个自定义元素my-checkbox
,它包含一个复选框,标签,样式等。当切换该复选框时,我在我的构造函数中定义一个名为check的CustomEvent
,如下所示:
constructor(){
super();
this._shadowRoot = this.attachShadow({mode: 'open'});
this.checkEvent = new CustomEvent("check", {
bubbles: true,
cancelable: false,
});
}
I dispatch that event when the checkbox is toggled: 切换复选框时,我会调度该事件:
toggleCheckbox(){
this.dispatchEvent(this.checkEvent);
console.log(this.checkEvent);
...
}
I infer that this event is being dispatched because the contents of the console.log show the signature of a CustomEvent 我推断这个事件正在被调度,因为console.log的内容显示了CustomEvent的签名
I have another custom element my-checkreport
that contains my-checkbox and is supposed to react to the "check" event. 我有另一个自定义元素my-checkreport
,其中包含my-checkbox,应该对“check”事件作出反应。 I have defined an event listener in the connected callback of my-checkreport
我在my-checkreport
的连接回调中定义了一个事件监听my-checkreport
connectedCallback(){
...
this.addEventListener("check", function (e) {
console.log('listend to check event');
console.log(e);
});
}
However, this eventListener never fires, never seems to 'hear' the "check" event dispatched in the my-checkbox
component. 但是,这个eventListener永远不会触发,似乎永远不会“听到” my-checkbox
组件中调度的“check”事件。 I've tried adding this listener in the constructor with the same result. 我已经尝试在构造函数中添加此侦听器,但结果相同。
Any ideas what I'm doing wrong? 我有什么想法我做错了吗?
Background: I'm doing it this way in the interest of making these elements composable. 背景:我这样做是为了使这些元素可以组合。 I also have read that best practices for developing web components is to "Use custom events to pass information out of components..." 我还读过,开发Web组件的最佳实践是“使用自定义事件将信息传递出组件......”
If your compound element <my-checkreport>
uses a Shadow DOM to embed its content ( <my-checkbox>
, label, styling...), dispatched events from an inner element (here <my-checkbox>
) will be fired inside the (container's) Shadow DOM. 如果复合元素<my-checkreport>
使用Shadow DOM嵌入其内容( <my-checkbox>
,label,样式...),则内部元素(此处为<my-checkbox>
)的调度事件将在内部触发(容器的)Shadow DOM。
Therefore, you should add the event listener to the Shadow DOM's root of the compound custom element ( this._shadowRoot
) instead of to the element ( this
) itself. 因此,您应该将事件侦听器添加到复合自定义元素( this._shadowRoot
)的Shadow DOM根目录中,而不是添加到元素( this
)本身。 In <my-checkreport>
: 在<my-checkreport>
:
connectedCallback(){
...
this._shadowRoot.addEventListener("check", function (e) {
console.log('listend to check event');
console.log(e);
});
}
More on Shadow DOM: 有关Shadow DOM的更多信息:
For others who end up here, the specific property you're looking for to break out of the shadow root 'jail' is "composed". 对于那些最终到达这里的人来说,你正在寻找的特定属性是打破阴影根“监狱”的“组成”。
So: 所以:
this.checkEvent = new CustomEvent("check", {
bubbles: true,
cancelable: false,
composed: true
});
You can also add another property, "detail" which will carry custom data on the event, if you like. 如果您愿意,还可以添加另一个属性“详细信息”,该属性将包含事件的自定义数据。
More info here: composed property 更多信息在这里: 组成的财产
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.