Custom Events

We can create custom events in Nijor. What it means is that, just like events like on:click exist in Nijor, we can create our own event like on:myevent . It's pretty easy to do so.
Let's consider a component msg.nijor which uses a custom event on:msg . Whenever a message is send from the send.nijor , the sender's name and message gets printed in the paragraph tag.

        File : src/page/msg.nijor 

            <template>
                <div>
                    <p id="msg" on:msg="PrintMsg($data)">
                </div>
            </template>
            <script>
            function PrintMsg(msgdata){
                document.getElementById('msg').innerHTML += `${msgdata.name} : ${msgdata.text} <br>`;
            }
            </script>
            <script defer>
                // element.addEventListener doesn't work for custom events.
                // document.getElementById('msg').addEventListener('msg',($data)=>PrintMsg($data)); doesn't work for custom events.
            </script>
        
    

        File : src/page/msg.nijor 

            <template>
                <div>
                    <p id="msg" on:msg="PrintMsg($data)">
                </div>
            </template>
            <script>
            function PrintMsg(msgdata){
                document.getElementById('msg').innerHTML += `${msgdata.name} : ${msgdata.text} <br>`;
            }
            </script>
            <script defer>
                // element.addEventListener doesn't work for custom events.
                // document.getElementById('msg').addEventListener('msg',($data)=>PrintMsg($data)); doesn't work for custom events.
            </script>
        
    

        File : src/page/send.nijor 

            <template>
                <div>
                    <input id="name">
                    <input id="message">
                    <input type="button" on:click="SendMsg()" value="Send">
                </div>
            </template>
            <script>
            function SendMsg(msgdata){
                let name = document.getElementById('name');
                let message = document.getElementById('message');
                let data = {name:name,text:message};

                // This fires the 'on:msg' event across all the components that are currently in use.
                // All the elements with on:msg events' function's $data get replaced by {name:name,text:message}
                window.nijor.emitEvent('msg',data);
            }
            </script>