Events

Events system in Metro UI Components Library.

About

Many components in Metro UI generate events during their work. All events are defined width attributes with prefix data-on-*. To define event you can use two ways:

1. Set function name as data-on-* attribute value
2. use valid javascript code for data-on-* attribute value

                    <input data-role="keypad" data-on-change="console.log(arguments)">
                    <input data-role="keypad" data-on-change="dataChange">
                    <input data-role="keypad" data-on-change="MyPackage.dataChange">

                    <script>
                        function dataChange(el){
                            console.log(arguments);
                        }

                        var MyPackage = {
                            dataChange: function(el){
                                console.log(arguments);
                            }
                        }
                    </script>
                

Subscribing to the events

You can subscribe to components events with m4q method $.on(...) and/or JS method addEventListener(...).

                    <input data-role="keypad" id="keypad">

                    <script>
                        $("#keypad").on("shuffle", function(e){
                            console.log(e.detail);
                        })

                        /* or */

                        document.getElementById("keypad").addEventListener("shuffle", function(e){
                            console.log(e.detail);
                        })
                    </script>
                

Important! If you subscribe to the events, event you must define name without data-on-.

                    on html
                    <input data-role="keypad" id="keypad" data-on-shuffle="...">

                    on js
                    document.getElementById("keypad").addEventListener("shuffle", function(e){
                        console.log(e.detail);
                    })