Dieser Artikel beschreibt, wie JS eine Schaltfläche implementiert. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
<! docType html> <html> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "edge"> <script> Fenster.onload = function () {var btn = new btn (); btn.init ({width: 300}); BindEvent (btn, 'show', function () {alert (1);}) BindEvent (btn, 'click', function () {alert (2);}) var obtn = document.getElementById ('btn'); obtn.onclick = function () {fireEvent (btn, 'show'); }} Funktion btn () {this.btn = null; this.Settings = {Breite: 200, Höhe: 40, Borderradius: 6, Text: 'Button'}; } Btn.prototype.init = function (opt) {extend (this.Setings, opt); this.creat (); } Btn.prototype.creat = function () {this.btn = document.createelement ('div'); document.body.appendchild (this.btn); this.btn.innnerhtml = this.setings.Text; this.setData (); } Btn.prototype.destory = function () {document.body.removechild (this.btn); } Btn.prototype.setData = function () {this.btn.style.width = this.setings.width +'px'; this.btn.style.height = this.setings.height +'px'; this.btn.style.border = 'Solid #f00' + this.setings.borderRadius + 'px'; } function erweitert (obj1, obj2) {für (var attr in obj2) {obj1 [attr] = obj2 [attr]; }} Funktion BindEvent (OBJ, Ereignisse, fn) {obj.listeners = obj.listeners || {}; Obj.Listeners [Ereignisse] = Obj.Listeners [Ereignisse] || []; Obj.Listeners [Ereignisse] .push (fn); if (obj.nodetype) {if (obj.addeventListener) {obj.addeventListener (Ereignisse, fn, false); } else {obj.attachEvent ('on'+Ereignisse, fn); }}} Funktion fireevent (obj, Ereignisse) {if (obj.Listeners [Ereignisse]) {für (var i in obj.listeners [Ereignissen]) {Obj.Listeners [Ereignisse] [i] (); }}} </script> </head> <body> <a id = "btn" style = "margin-top: 40px;" > 12 </a> </body> </html>Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.