Table of contents

Events

Events system in Metro 4 Components Library.

About

Many components in Metro 4 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>