この記事では、JSがボタンをどのように実装するかについて説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
<！doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "edge"> <script> 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'）; }} function btn（）{this.btn = null; this.settings = {width：200、height：40、borderradius：6、text： 'button'}; } 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 = 'solid＃f00' + this.settings.borderradius + 'px'; }関数拡張（obj1、obj2）{for（bar attr in obj2）{obj1 [attr] = obj2 [attr]; }} function bindevent（obj、events、fn）{obj.listeners = obj.listeners || {}; obj.listeners [events] = obj.listeners [events] || []; obj.listeners [events] .push（fn）; if（obj.nodetype）{if（obj.addeventlistener）{obj.addeventlistener（events、fn、false）; } else {obj.attachevent（ 'on'+events、fn）; }}} function fireevent（obj、events）{if（obj.listeners [events]）{for（var i in obj.listeners [events]）{obj.listeners [events] [i]（）; }}} </script> </head> <body> <a id = "btn" style = "margin-top：40px;" > 12 </a> </body> </html>この記事がみんなのJavaScriptプログラミングに役立つことを願っています。