emit
Using the emit method, you can actively trigger events, and the triggered events have a bubbling mechanism. The bubbling mechanism means that the event bubbles from the inner element to the outer element, triggering events from the innermost to the outermost hierarchy.
The following is an example demonstrating how to use the emit method to trigger custom events and utilize the bubbling mechanism to pass events to external elements:
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<ul>
<li id="target">
I am target
</li>
</ul>
<div id="logger1" style="border:red solid 1px;padding:8px;">-</div>
<div id="logger2" style="border:blue solid 1px;padding:8px;">-</div>
<script>
let count = 0;
$('ul').on('custom-event',()=>{
count++;
$("#logger1").text = 'ul is triggered ' + count;
});
$('#target').on('custom-event',()=>{
count++;
$("#logger2").text = 'target is triggered ' + count;
});
setTimeout(()=>{
$("#target").emit("custom-event",{
data:"I am data"
});
},500);
</script>
In this example, we registered the same custom event handler "custom-event" for both the <ul> element and the <li> element. When we use the emit method to trigger the event, the event bubbles from the <li> element to the <ul> element, triggering both event handlers.
Custom Data
Through the use of the data parameter, you can pass custom data to event handlers.
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<ul>
<li id="target">
I am target
</li>
</ul>
<div id="logger1" style="border:red solid 1px;padding:8px;">-</div>
<div id="logger2" style="border:blue solid 1px;padding:8px;">-</div>
<script>
$('ul').on('custom-event',(event)=>{
$("#logger1").text = 'ul is triggered; => ' + event.data;
});
$('#target').on('custom-event',(event)=>{
$("#logger2").text = 'target is triggered; => ' + event.data;
});
setTimeout(()=>{
$("#target").emit("custom-event",{
data:"I am data"
});
},500);
</script>
In this example, we pass custom data to the event handler through the data parameter. The event handler can access the passed data through event.data.
No bubble-triggered events
If you do not want the event to bubble, you can include the bubbles: false parameter when triggering the event:
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<ul>
<li id="target">
I am target
</li>
</ul>
<div id="logger1" style="border:red solid 1px;padding:8px;">-</div>
<div id="logger2" style="border:blue solid 1px;padding:8px;">-</div>
<script>
$('ul').on('custom-event',()=>{
$("#logger1").text = 'ul is triggered';
});
$('#target').on('custom-event',()=>{
$("#logger2").text = 'target is triggered';
});
setTimeout(()=>{
$("#target").emit("custom-event",{
bubbles: false
});
},500);
</script>
In this example, we use the bubbles: false parameter to trigger a custom event. This event does not bubble up to the parent elements, so only the event handler of the <li> element is triggered.
Penetrate the root node
By default, events do not penetrate the shadow DOM of custom components. However, you can enable event penetration through the root node and trigger elements outside the root node by setting composed: true.
<!-- Code at the usage of the composed-test component -->
<div id="outer-logger"></div>
<div id="wrapper">
<composed-test></composed-test>
</div>
<script>
$("#wrapper").on('custom-event',() => {
$('#outer-logger').text = 'ok';
});
</script>
<div id="outer-logger"></div>
<div id="wrapper">
<composed-test></composed-test>
</div>
<script>
$("#wrapper").on('custom-event', () => {
$('#outer-logger').text = 'ok';
});
</script>
<template component>
<style>
:host{
display:block;
border:red solid 1px;
}
</style>
<div id="logger">{{loggerText}}</div>
<div on:custom-event="loggerText = 'custom event is triggered'" id="target"></div>
<script>
export default {
tag: "composed-test",
data:{
loggerText: ""
},
ready(){
setTimeout(()=>{
this.shadow.$("#target").emit("custom-event",{
composed: true,
});
},500);
}
};
</script>
</template>
In this example, we create a custom component composed-test that includes an element in the shadow DOM and a button that triggers an event. By default, the event does not penetrate the shadow DOM to the root node. However, by using the composed: true parameter when triggering the event, we allow the event to penetrate to the root node, triggering elements outside of the root node.