Este artículo describe cómo JS implementa un botón. Compártelo para su referencia. El método de implementación específico es el siguiente:
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "bord"> <script> window.onload = function () {var btn = new btn (); btn.init ({ancho: 300}); bindEvent (btn, 'show', function () {alert (1);}) bindEvent (btn, 'click', function () {alerta (2);}) var obtn = document.getElementById ('btn'); oBT.OnClick = function () {FireEvent (btn, 'show'); }} function btn () {this.btn = null; this.settings = {ancho: 200, altura: 40, borderradius: 6, texto: 'botón'}; } Btn.prototype.init = function (opt) {extend (this.settings, opt); this.creat (); } Btn.prototype.creat = function () {this.btn = document.createElement ('div'); document.body.appendChild (this.btn); this.btn.innerhtml = this.settings.text; this.setData (); } Btn.prototype.destory = function () {document.body.removechild (this.btn); } Btn.prototype.setData = function () {this.btn.style.width = this.settings.width +'px'; this.btn.style.height = this.settings.height +'px'; this.btn.style.border = 'sólido #f00' + this.settings.borderradius + 'px'; } función extender (obj1, obj2) {for (var attr en obj2) {obj1 [attr] = obj2 [attr]; }} función bindEvent (obj, eventos, fn) {obj.listeners = obj.listeners || {}; obj.listeners [eventos] = obj.listeners [eventos] || []; obj.listeners [eventos] .push (fn); if (obj.nodeType) {if (obj.addeventListener) {obj.addeventListener (eventos, fn, falso); } else {obj.attachevent ('on'+eventos, fn); }}} function fireEvent (obj, eventos) {if (obj.listeners [eventos]) {para (var i en obj.listeners [eventos]) {obj.listeners [eventos] [i] (); }}} </script> </head> <body> <a id = "btn" style = "margin-top: 40px;" > 12 </a> </body> </html>Espero que este artículo sea útil para la programación de JavaScript de todos.