この記事では、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プログラミングに役立つことを願っています。