บทความนี้อธิบายถึงการใช้งานเหตุการณ์ที่กำหนดเองใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ในการพัฒนาส่วนหน้าเว็บหลายคนอาจไม่ใช้กิจกรรมที่กำหนดเอง JS แต่ถ้าคุณทำโครงการที่ค่อนข้างใหญ่โดยเฉพาะอย่างยิ่งเมื่อหลายคนพัฒนาร่วมกันเหตุการณ์ที่กำหนดเองมีความสำคัญมาก ดังนั้นเหตุการณ์ที่กำหนดเองใน JS คืออะไร? ก่อนอื่นดูตัวอย่าง:
นักพัฒนาส่วนหน้าจะสรุปฟังก์ชั่น:
คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่นย้าย () {
การแจ้งเตือน (a); // นี่แสดงถึงรหัส n-line
-
หลังจากนั้นไม่นานนักพัฒนาส่วนหน้า B จะเพิ่มฟังก์ชั่นนี้ตาม A ดังนั้นเขาจะเขียนเช่นนี้:
คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่นย้าย () {
การแจ้งเตือน (a); // นี่แสดงถึงรหัส n-line
การแจ้งเตือน (b); // นี่แสดงถึงบรรทัด n ของรหัส
-
คุณค้นพบปัญหาหรือไม่? B ควรให้ความสนใจกับปัญหาการตั้งชื่อและความขัดแย้งด้วยตัวแปรฟังก์ชั่น ฯลฯ กับ A. หลังจากนั้นไม่นานนักพัฒนาส่วนหน้า C ควรเพิ่มฟังก์ชั่นนี้ด้วยเช่นกัน:
คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่นย้าย () {
การแจ้งเตือน (a); // นี่แสดงถึงรหัส n-line
การแจ้งเตือน (b); // นี่แสดงถึงบรรทัด n ของรหัส
การแจ้งเตือน (c); // นี่แสดงถึงบรรทัด n ของรหัส
-
มันจะบ้าในเวลานี้และฉันแน่ใจว่ามันจะไม่ง่ายสำหรับ C ที่จะเขียนโค้ด การแก้ปัญหานี้คือการปรับแต่งเหตุการณ์เรารู้ว่าองค์ประกอบสามารถเพิ่มเหตุการณ์เดียวกันโดยไม่ส่งผลกระทบต่อกันและกันเช่น:
การคัดลอกรหัสมีดังนี้: window.addeventListener ('คลิก', function () {
การแจ้งเตือน (1);
} ,เท็จ);
window.addeventListener ('คลิก', function () {
การแจ้งเตือน (2);
} ,เท็จ);
เมื่อคลิกที่หน้า 1 และ 2 จะปรากฏขึ้นเพื่อให้เราสามารถใช้วิธีนี้เพื่อกำหนดฟังก์ชั่นของเรา:
การคัดลอกรหัสมีดังนี้: window.addeventListener ('ย้าย', function () {
การแจ้งเตือน (3);
} ,เท็จ);
window.addeventListener ('ย้าย', function () {
การแจ้งเตือน (4);
} ,เท็จ);
ด้วยวิธีนี้เมื่อเราดำเนินการย้าย ();, 3 และ 4 จะปรากฏขึ้น ที่นี่การย้ายเป็นเหตุการณ์ที่กำหนดเองจริง ๆ แล้วเป็นฟังก์ชัน
มาดูกันว่าจะส่งพารามิเตอร์ไปยังตัวจัดการเหตุการณ์:
คัดลอกรหัสดังนี้: // ห่อหุ้มฟังก์ชันด้วยพารามิเตอร์ลงในฟังก์ชันที่ไม่มีพารามิเตอร์
ฟังก์ชั่น createFunction (obj, strfunc) {
var args = []; // กำหนด args เพื่อจัดเก็บพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
ถ้า (! obj) obj = หน้าต่าง; // ถ้าเป็นฟังก์ชั่นทั่วโลก obj = หน้าต่าง;
// รับพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
สำหรับ (var i = 2; i <arguments.length; i ++) args.push (อาร์กิวเมนต์ [i]);
// ใช้ Call of Event Handler ด้วยฟังก์ชันที่ไม่มีพารามิเตอร์
return function () {
obj [strfunc] .apply (obj, args); // ส่งพารามิเตอร์ไปยังตัวจัดการเหตุการณ์ที่ระบุ
-
-
ฟังก์ชั่น Class1 () {
-
class1.prototype = {
แสดง: function () {
this.onshow ();
-
onshow: function () {}
-
ฟังก์ชั่น objonshow (ชื่อผู้ใช้) {
การแจ้งเตือน ("สวัสดี" + ชื่อผู้ใช้);
-
ฟังก์ชั่นทดสอบ () {
var obj = ใหม่ class1 ();
ชื่อผู้ใช้ var = "ทดสอบ";
obj.onshow = createFunction (null, "objonshow", ชื่อผู้ใช้);
obj.show ();
-
"เนื่องจากกลไกเหตุการณ์ผ่านชื่อของฟังก์ชั่นโดยไม่มีข้อมูลพารามิเตอร์ใด ๆ จึงเป็นไปไม่ได้ที่จะส่งผ่านพารามิเตอร์" นี่เป็นเรื่องเล่าในภายหลัง "เพื่อแก้ปัญหานี้คุณสามารถพิจารณาจากแนวคิดที่ตรงกันข้ามโดยไม่พิจารณาวิธีส่งผ่านพารามิเตอร์ แต่พิจารณาวิธีการสร้างตัวจัดการเหตุการณ์โดยไม่มีพารามิเตอร์โปรแกรมจะถูกสร้างขึ้นตามตัวจัดการเหตุการณ์ที่มีพารามิเตอร์และเป็นการห่อหุ้มด้านนอก" "โปรแกรม" นี่คือฟังก์ชั่น createFunction ซึ่งใช้ฟังก์ชั่นการใช้อย่างชาญฉลาดเพื่อห่อหุ้มฟังก์ชั่นด้วยพารามิเตอร์ลงในฟังก์ชันที่ไม่มีพารามิเตอร์ ในที่สุดลองมาดูวิธีการใช้งานหลายมัลติสำหรับกิจกรรมที่กำหนดเอง:
คัดลอกรหัสดังต่อไปนี้: // เพื่อเปิดใช้งานเหตุการณ์ที่กำหนดเองเพื่อรองรับการเชื่อมโยงหลายรายการ
// ห่อหุ้มฟังก์ชั่นที่มีพารามิเตอร์ลงในฟังก์ชันที่ไม่มีพารามิเตอร์
ฟังก์ชั่น createFunction (obj, strfunc) {
var args = []; // กำหนด args เพื่อจัดเก็บพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
ถ้า (! obj) obj = หน้าต่าง; // ถ้าเป็นฟังก์ชั่นทั่วโลก obj = หน้าต่าง;
// รับพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
สำหรับ (var i = 2; i <arguments.length; i ++) args.push (อาร์กิวเมนต์ [i]);
// ใช้ Call of Event Handler ด้วยฟังก์ชันที่ไม่มีพารามิเตอร์
return function () {
obj [strfunc] .apply (obj, args); // ส่งพารามิเตอร์ไปยังตัวจัดการเหตุการณ์ที่ระบุ
-
-
ฟังก์ชั่น Class1 () {
-
class1.prototype = {
แสดง: function () {
if (this.onshow) {
สำหรับ (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
-
-
-
attachOnshow: ฟังก์ชั่น (_ehandler) {
if (! this.onshow) {this.onshow = []; -
this.onshow.push (_ehandler);
-
-
ฟังก์ชั่น objonshow (ชื่อผู้ใช้) {
การแจ้งเตือน ("สวัสดี" + ชื่อผู้ใช้);
-
ฟังก์ชั่น objonshow2 (testName) {
การแจ้งเตือน ("show:" + testName);
-
ฟังก์ชั่นทดสอบ () {
var obj = ใหม่ class1 ();
var username = "ชื่อของคุณ";
obj.attachonshow (createFunction (null, "objonshow", ชื่อผู้ใช้));
obj.attachonshow (createFunction (null, "objonshow2", "ข้อความทดสอบ"));
obj.show ();
-
เราจะเห็นว่าแนวคิดพื้นฐานของการใช้วิธีการแนบ enshow คือการผลักดันอาร์เรย์ ในความเป็นจริงเรายังสามารถลบฟังก์ชั่นตัวจัดการเหตุการณ์หลังจากดำเนินการเหตุการณ์และนำไปใช้แยกกันด้านล่าง:
คัดลอกรหัสดังนี้: // ห่อหุ้มฟังก์ชันด้วยพารามิเตอร์ลงในฟังก์ชันที่ไม่มีพารามิเตอร์
ฟังก์ชั่น createFunction (obj, strfunc) {
var args = []; // กำหนด args เพื่อจัดเก็บพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
ถ้า (! obj) obj = หน้าต่าง; // ถ้าเป็นฟังก์ชั่นทั่วโลก obj = หน้าต่าง;
// รับพารามิเตอร์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์
สำหรับ (var i = 2; i <arguments.length; i ++) args.push (อาร์กิวเมนต์ [i]);
// ใช้ Call of Event Handler ด้วยฟังก์ชันที่ไม่มีพารามิเตอร์
return function () {
obj [strfunc] .apply (obj, args); // ส่งพารามิเตอร์ไปยังตัวจัดการเหตุการณ์ที่ระบุ
-
-
ฟังก์ชั่น Class1 () {
-
class1.prototype = {
แสดง: function () {
if (this.onshow) {
สำหรับ (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
-
-
-
attachOnshow: ฟังก์ชั่น (_ehandler) {// เหตุการณ์เพิ่มเติม
if (! this.onshow) {this.onshow = []; -
this.onshow.push (_ehandler);
-
detachonshow: ฟังก์ชั่น (_ehandler) {// ลบเหตุการณ์
if (! this.onshow) {this.onshow = []; -
this.onshow.pop (_ehandler);
-
-
ฟังก์ชั่น objonshow (ชื่อผู้ใช้) {
การแจ้งเตือน ("สวัสดี" + ชื่อผู้ใช้);
-
ฟังก์ชั่น objonshow2 (testName) {
การแจ้งเตือน ("show:" + testName);
-
ฟังก์ชั่นทดสอบ () {
var obj = ใหม่ class1 ();
var username = "ชื่อของคุณ";
obj.attachonshow (createFunction (null, "objonshow", ชื่อผู้ใช้));
obj.attachonshow (createFunction (null, "objonshow2", "ข้อความทดสอบ"));
obj.show ();
obj.detachonshow (createFunction (null, "objonshow", ชื่อผู้ใช้));
obj.show (); // ลบหนึ่งและแสดงอันที่เหลือ
obj.detachonshow (CreateFunction (Null, "Objonshow2", "Test Message"));
obj.show (); // ทั้งคู่จะถูกลบออกและไม่มีการแสดง
-
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน