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 (2.4 KiB) Viewed 1317 times
เมื้อคลิกที่ตำแหน่งดังกล่าวข้อความจะเปลี่ยนแปลงเป็นดังนี้
- k2.png (3.77 KiB) Viewed 1317 times
จากผลลัพธ์จะเห็นว่าเป็นการจัดการ event ได้ในกรณีที่ต้องการระบุรายเอียดเพิ่มเติมหรือแนบฟังก์ชันตัวจัดการเหตุการ(event)สำหรับเหตุการณ์หนึ่งหรือมากกว่า1เหตุการณ์ขึ้นไปกับองค์ประกอบที่เลือก
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-
สอนการใช้งาน HTML & CSS
-
ถามตอบ HTML CSS
-
บทเรียน CSS
-
บทเรียน HTML5
-
แลกเปลี่ยนความรู้ PHP
on() เป็นเมธอดที่ inbuilt ใน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]jQuery[/url] ซึ่งใช้ในการกำหนดหนึ่งหรือมากกว่าตัวจัดการเหตุการณ์(event)สำหรับองค์ประกอบ([url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url])ที่เลือกและองค์ประกอบของ child elements ใน DOM
[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/2897-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-6-jquery-dom-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1.html]DOM[/url] (Document Object Model) เป็นมาตรฐานของ World Wide Web Consortium สิ่งนี้นิยามสำหรับการเข้าถึงองค์ประกอบในทรี DOM
[code]$(selector).on(para1, para2, para3, para4)[/code]
พารามิเตอร์:มันยอมรับพารามิเตอร์บางอย่างที่ระบุด้านล่าง -
[list][*]para1: ระบุเหตุการณ์ที่แนบหรือใส่มากับองค์ประกอบที่เลือก
[*]para2:เป็นตัวเลือกเพิ่มเติมและสามารถระบุถึงค่าชายน์(child)เฉพาะที่สามารถใช้ตัวจัดการเหตุการณ์
[*]para3:นี่เป็นตัวเลือกเพิ่มเติมเพื่อระบุข้อมูลเพิ่มเติมที่จะส่งผ่านพร้อมกับฟังก์ชัน
[*]para4:นี่เป็นการระบุฟังก์ชันที่จะรันเมื่อมีเหตุการณ์เกิดขึ้น[/list]
[b]ตัวอย่างโค้ด[/b]jQuery เพื่อแสดงการทำงานของmethod on()
[code]<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>
[/code]
ผลลัพธ์เมื่อเปิดกับเบราเซอร์
[attachment=0]k1.png[/attachment]
เมื้อคลิกที่ตำแหน่งดังกล่าวข้อความจะเปลี่ยนแปลงเป็นดังนี้
[attachment=1]k2.png[/attachment]
จากผลลัพธ์จะเห็นว่าเป็นการจัดการ event ได้ในกรณีที่ต้องการระบุรายเอียดเพิ่มเติมหรือแนบฟังก์ชันตัวจัดการเหตุการ(event)สำหรับเหตุการณ์หนึ่งหรือมากกว่า1เหตุการณ์ขึ้นไปกับองค์ประกอบที่เลือก
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]