JQuery Tips : เมธอด on() เพื่อจัดการเหตุการณ์

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

JQuery Tips : เมธอด on() เพื่อจัดการเหตุการณ์

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

on() เป็นเมธอดที่ inbuilt ใน jQuery ซึ่งใช้ในการกำหนดหนึ่งหรือมากกว่าตัวจัดการเหตุการณ์(event)สำหรับองค์ประกอบ(element)ที่เลือกและองค์ประกอบของ child elements ใน DOM
DOM (Document Object Model) เป็นมาตรฐานของ World Wide Web Consortium สิ่งนี้นิยามสำหรับการเข้าถึงองค์ประกอบในทรี DOM

โค้ด: เลือกทั้งหมด

$(selector).on(para1, para2, para3, para4)
พารามิเตอร์:มันยอมรับพารามิเตอร์บางอย่างที่ระบุด้านล่าง -
  • para1: ระบุเหตุการณ์ที่แนบหรือใส่มากับองค์ประกอบที่เลือก
  • para2:เป็นตัวเลือกเพิ่มเติมและสามารถระบุถึงค่าชายน์(child)เฉพาะที่สามารถใช้ตัวจัดการเหตุการณ์
  • para3:นี่เป็นตัวเลือกเพิ่มเติมเพื่อระบุข้อมูลเพิ่มเติมที่จะส่งผ่านพร้อมกับฟังก์ชัน
  • para4:นี่เป็นการระบุฟังก์ชันที่จะรันเมื่อมีเหตุการณ์เกิดขึ้น
ตัวอย่างโค้ดjQuery เพื่อแสดงการทำงานของmethod on()

โค้ด: เลือกทั้งหมด

<html> 

<head> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
	<script> 
		<!--jQuery code to show on method -->
		$(document).ready(function() { 
			$("p").on("click", function() { 
				document.getElementById("p1").innerHTML = "Paragraph changed!"; 
			}); 
		}); 
	</script> 
	<style> 
		#p1 { 
			font-size: 30px; 
			width: 400px; 
			padding: 20px; 
			border: 2px solid green; 
		} 
	</style> 
</head> 

<body> 
	<!--click on this paragraph -->
	<p id="p1">Click Here !!!</p> 
</body> 

</html> 
ผลลัพธ์เมื่อเปิดกับเบราเซอร์
k1.png
k1.png (2.4 KiB) Viewed 1284 times
เมื้อคลิกที่ตำแหน่งดังกล่าวข้อความจะเปลี่ยนแปลงเป็นดังนี้
k2.png
k2.png (3.77 KiB) Viewed 1284 times
จากผลลัพธ์จะเห็นว่าเป็นการจัดการ event ได้ในกรณีที่ต้องการระบุรายเอียดเพิ่มเติมหรือแนบฟังก์ชันตัวจัดการเหตุการ(event)สำหรับเหตุการณ์หนึ่งหรือมากกว่า1เหตุการณ์ขึ้นไปกับองค์ประกอบที่เลือก

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot] และบุคลทั่วไป 50