© SeeNual All rights reserved.
บทความ โดย สีนวลดอทคอม อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า 4.0 International.
| เหตุการณ์ของเมาส์ | เหตุการณ์แป้นพิมพ์ | เหตุการณ์แบบฟอร์ม | เหตุการณ์เอกสาร / หน้าต่าง |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
click()
|
1 2 3 |
$("p").click(function(){ $(this).hide(); }); |
dblclick()
|
1 2 3 |
$("p").dblclick(function(){ $(this).hide(); }); |
mouseenter()
เมื่อตัวชี้เมาส์เข้าองค์ประกอบ HTML นี้
|
1 2 3 |
$("#p1").mouseenter(function(){ alert("You entered p1!"); }); |
mouseleave()
เมื่อตัวชี้เมาส์ออกจากองค์ประกอบ HTML นี้
|
1 2 3 |
$("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); |
mousedown()
เมื่อซ้ายปุ่มตรงกลางหรือขวาของเมาส์จะถูกกดลงในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้
|
1 2 3 |
$("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); |
mouseup()
เมื่อซ้าย, ปุ่มกลางของเมาส์หรือขวาถูกปล่อยออกมาในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้
|
1 2 3 |
$("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); |
hover()
การรวมกันของการ mouseenter() และ mouseleave()
คือ เมื่อเมาส์เข้าองค์ประกอบ HTML และฟังก์ชั่นที่สองคือการดำเนินการเมื่อเมาส์ออกจากองค์ประกอบ HTML นี้
|
1 2 3 4 5 6 |
$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); |
focus()
ฟังก์ชั่นจะถูกดำเนินการเมื่อฟิลด์แบบฟอร์มที่ได้รับโฟกัส
|
1 2 3 |
$("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); |
blur()
เมื่อเขตข้อมูลฟอร์มสูญเสียโฟกัส
|
1 2 3 |
$("input").blur(function(){ $(this).css("background-color", "#ffffff"); }); |
|
1 2 3 |
$("p").on("click", function(){ $(this).hide(); }); |
|
1 2 3 4 5 6 7 8 9 10 11 |
$("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); |
ดูเพิ่มเติม http://www.w3im.com/th/jquery/jquery_events.html
ป้ายกำกับ:jQuery, jQuery Event
© SeeNual All rights reserved.
บทความ โดย สีนวลดอทคอม อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า 4.0 International.