Este artigo descreve como o JS implementa um botão. Compartilhe para sua referência. O método de implementação específico é o seguinte:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "edge"> <cript> window.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'); }} função btn () {this.btn = null; this.settings = {Width: 200, Height: 40, BorderRadius: 6, texto: 'Button'}; } Btn.prototype.init = function (opt) {estend (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'; } função estend (obj1, obj2) {for (var att em obj2) {obj1 [att] = obj2 [att]; }} função 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, false); } else {obj.attachevent ('on'+events, fn); }}} função fireEvent (obj, events) {if (obj.listeners [events]) {for (var i em obj.listeners [events]) {obj.listeners [events] [i] (); }}} </script> </ad Head> <body> <a id = "btn" style = "margin-top: 40px;" > 12 </a> </body> </html>Espero que este artigo seja útil para a programação JavaScript de todos.