บทความนี้อธิบายวิธีที่ JS ใช้ปุ่ม แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua ที่เข้ากันได้" content = "edge"> <script> window.onload = function () {var btn = ใหม่ btn (); btn.init ({width: 300}); bindeVent (btn, 'show', function () {Alert (1);}) bindeVent (btn, 'คลิก', ฟังก์ชัน () {Alert (2);}) var obtn = document.getElementById ('btn'); obtn.onclick = function () {firevent (btn, 'show'); }} ฟังก์ชั่น btn () {this.btn = null; this.settings = {width: 200, ความสูง: 40, borderradius: 6, ข้อความ: 'ปุ่ม'}; } btn.prototype.init = ฟังก์ชั่น (opt) {ขยาย (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) {สำหรับ (var attain ใน obj2) {obj1 [attr] = obj2 [attr]; }} ฟังก์ชั่น bindeVent (obj, เหตุการณ์, fn) {obj.listeners = obj.listeners || - obj.listeners [events] = obj.listeners [เหตุการณ์] || - obj.listeners [events] .push (fn); if (obj.nodeType) {ถ้า (obj.addeventListener) {obj.addeventListener (เหตุการณ์, fn, false); } else {obj.attachevent ('on'+events, fn); }}} ฟังก์ชั่น FireVent (obj, เหตุการณ์) {ถ้า (obj.listeners [events]) {สำหรับ (var i ใน obj.listeners [เหตุการณ์]) {obj.listeners [events] [i] (); }}} </script> </head> <body> <a id = "btn" style = "margin-top: 40px;" > 12 </a> </body> </html>ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน