วิธีตั้งค่า onClick ด้วย JavaScript

เหตุการณ์คือการดำเนินการโดยเบราว์เซอร์หรือผู้ใช้ สามารถใช้แนวคิด JavaScript ของตัวจัดการเหตุการณ์หรือตัวฟังเพื่อจัดการกับเหตุการณ์เหล่านี้ เหตุการณ์บางอย่างทริกเกอร์การดำเนินการของผู้ฟังเหตุการณ์ หนึ่งในผู้ฟังเหตุการณ์เหล่านี้คือ “ เมื่อคลิก ” เมื่อผู้ใช้คลิกที่องค์ประกอบ ตัวฟังเหตุการณ์ onClick จะถูกทริกเกอร์หรือดำเนินการ

บทช่วยสอนนี้จะกำหนดขั้นตอนการตั้งค่า onClick ด้วย JavaScript

วิธีตั้งค่า onClick ด้วย JavaScript

เพื่อตั้งค่า เมื่อคลิก ด้วย JavaScript มีสองวิธีที่แตกต่างกัน ซึ่งได้แก่:

วิธีแรกคือการกำหนดค่าให้กับองค์ประกอบ HTML เมื่อคลิก แอตทริบิวต์โดยใช้ JavaScript
วิธีที่สองคือการเพิ่มตัวฟังเหตุการณ์อย่างชัดเจนในเหตุการณ์ HTML ซึ่งจะตรวจสอบ ' คลิก ' เหตุการณ์.

ตัวอย่างที่ 1: กำหนดค่าให้กับแอตทริบิวต์ onclick ขององค์ประกอบ HTML โดยใช้ JavaScript

ในไฟล์ HTML ให้สร้างหัวเรื่องและปุ่ม “ คลิกฉัน ” กับรหัส “ จ ” ซึ่งจะเรียกใช้ฟังก์ชัน JavaScript ในขณะที่คลิก

< ชั่วโมง2 > ชุด คุณสมบัติ onClick ด้วย JavaScript ชั่วโมง2 >

< รหัสปุ่ม = 'จ' > คลิกฉัน ปุ่ม >

ในขั้นตอนต่อไปนี้ ปุ่มที่สร้างขึ้นจะถูกเข้าถึงและ ' เมื่อคลิก แอตทริบิวต์ ” จะถูกแนบไปกับมัน เมื่อคลิกปุ่ม ฟังก์ชันที่ระบุจะถูกดำเนินการและ “ style.backgroundColor ” คุณสมบัติจะเปลี่ยนสีปุ่มดังนี้:

เอกสาร. getElementById ( 'จ' ) . เมื่อคลิก = ฟังก์ชัน jsFunc ( ) {

เอกสาร. getElementById ( 'จ' ) . สไตล์ . สีพื้นหลัง = 'สีม่วง' ;

}

ผลลัพธ์ที่เกี่ยวข้องจะเป็น:

ตัวอย่างที่ 2: เพิ่ม Listener เหตุการณ์อย่างชัดเจนในเหตุการณ์ HTML

สร้างปุ่ม “ คลิกที่นี่! ” และกำหนดรหัส “ เหตุการณ์ ” ที่จะทริกเกอร์เมธอด addEventListener() บน 'คลิก' เหตุการณ์:

< รหัสปุ่ม = 'เหตุการณ์' > คลิกที่นี่ ! แข็งแกร่ง > ปุ่ม แข็งแกร่ง >>

ดึงปุ่มโดยใช้มัน รหัส แล้วแนบ “ addEventListener() ” วิธีการโดยผ่าน “ คลิก ” เหตุการณ์และหน้าที่ “ งานกิจกรรม ” โดยที่สีพื้นหลังของปุ่มจะเปลี่ยนไป:

เอกสาร. getElementById ( 'เหตุการณ์' ) . addEventListener ( 'คลิก' , eventFunc ) ;

ฟังก์ชัน eventFunc ( ) {

เอกสาร. getElementById ( 'เหตุการณ์' ) . สไตล์ . สีพื้นหลัง = 'เขียว' ;

}

เอาต์พุต

ตัวอย่างที่ 3: การใช้วิธีการ onClick ทั้งหมดในครั้งเดียว

ในตัวอย่างนี้จะแสดงการทำงานของเมธอดทั้งหมดพร้อมกัน วิธีแรกคือวิธีเริ่มต้นในการเพิ่มแอตทริบิวต์ onclick ภายในแท็ก HTML หลังจากนั้นทั้งสองวิธีในการตั้งค่าแอตทริบิวต์ onclick ด้วยความช่วยเหลือของ JavaScript ก็ได้รับการสาธิตเช่นกัน

ในตัวอย่างต่อไปนี้ สร้างปุ่มสามปุ่มและดูการทำงานของแอตทริบิวต์ onclick

ปุ่มแรก “ คลิก ” จะเรียกว่า “ htmlFunc() ” ในงานคลิก
ปุ่ม ' คลิกฉัน ” จะถูกเข้าถึงด้วย id ที่กำหนด “ จ ” จากนั้นกำหนดค่าให้กับแอตทริบิวต์ onclick ของปุ่มโดยใช้ JavaScript
ปุ่ม ' คลิกที่นี่! ” จะเข้าถึงได้โดยใช้รหัส “ เหตุการณ์ ” แล้วแนบ “ addEventListener() ” วิธีการด้วย:

< รหัสปุ่ม = 'เอชทีเอ็มแอล' เมื่อคลิก = 'htmlFunc()' > คลิก ปุ่ม >< br >< br >

< รหัสปุ่ม = 'จ' > คลิกฉัน ปุ่ม >< br >< br >

< รหัสปุ่ม = 'เหตุการณ์' > คลิกที่นี่ ! ปุ่ม >

ฟังก์ชันด้านล่างจะทริกเกอร์ “ เมื่อคลิก ” เหตุการณ์ของปุ่ม “ คลิก ”:

ฟังก์ชัน htmlFunc ( ) {

เตือน ( 'ปุ่มที่คลิกโดยเหตุการณ์ HTML onClick' ) ;

}

เมื่อคลิก “ คลิกฉัน ” ปุ่ม ฟังก์ชันต่อไปนี้จะเรียกใช้เมื่อมีข้อความเตือนปรากฏขึ้น

เอกสาร. getElementById ( 'จ' ) . เมื่อคลิก = ฟังก์ชัน jsFunc ( ) {

เตือน ( 'ปุ่มที่คลิกโดยฟังก์ชัน JavaScript onClick' ) ;

}

ฟังก์ชันที่กำหนดจะเรียกใช้ปุ่ม “ คลิกที่นี่! ”:

เอกสาร. getElementById ( 'เหตุการณ์' ) . addEventListener ( 'คลิก' , eventFunc ) ;

ฟังก์ชัน eventFunc ( ) {

เตือน ( 'ปุ่มคลิกโดย JavaScript onClick with EventListener Method' ) ;

}

ผลลัพธ์จะแสดงข้อความแจ้งเตือนในแต่ละปุ่มที่คลิก:

บทสรุป

ในการตั้งค่า onclick ด้วย JavaScript มีสองวิธีที่แตกต่างกัน วิธีแรกคือการกำหนดค่าให้กับแอตทริบิวต์ onclick ขององค์ประกอบ HTML โดยใช้ JavaScript และวิธีที่สองคือการเพิ่มตัวฟังเหตุการณ์อย่างชัดเจนในเหตุการณ์ HTML ซึ่งจะตรวจสอบ ' คลิก ' เหตุการณ์. บทช่วยสอนนี้ได้กำหนดวิธีการตั้งค่า onClick ด้วย JavaScript พร้อมตัวอย่าง

วิธีตั้งค่า onClick ด้วย JavaScript