jQuery Event ที่ใช้งานบ่อยๆ

$("selector").on("event", function(){
    // คำสั่งที่จะทำงานเมื่อเกิด event
});

$("#myButton").on("click", function(){
    alert("Button clicked!");
});

$("selector").click(function(){
    // คำสั่งที่จะทำงานเมื่อเกิดการคลิก
});

$("#myDiv").click(function(){
    $(this).hide(); // ซ่อน div เมื่อถูกคลิก
});

$("selector").dblclick(function(){
    // คำสั่งที่จะทำงานเมื่อ double-click
});

$("#myDiv").dblclick(function(){
    $(this).css("background-color", "blue"); // เปลี่ยนสีพื้นหลังเมื่อ double-click
});

$("selector").hover(function(){
    // เมื่อเมาส์เลื่อนเข้า
}, function(){
    // เมื่อเมาส์เลื่อนออก
});

$("#myDiv").hover(function(){
    $(this).css("background-color", "yellow");
}, function(){
    $(this).css("background-color", "white");
});

$("selector").focus(function(){
    // เมื่อองค์ประกอบได้รับ focus
});

$("selector").blur(function(){
    // เมื่อองค์ประกอบสูญเสีย focus
});

$("#myInput").focus(function(){
    $(this).css("background-color", "lightgreen");
});

$("#myInput").blur(function(){
    $(this).css("background-color", "");
});

$("selector").keydown(function(event){
    // คำสั่งที่จะทำงานเมื่อกดแป้นพิมพ์
});

$("selector").keyup(function(event){
    // คำสั่งที่จะทำงานเมื่อปล่อยแป้นพิมพ์
});

$(document).keydown(function(event){
    alert("Key pressed: " + event.which);
});

$("form").submit(function(event){
    event.preventDefault(); // หยุดการส่งฟอร์ม
    // คำสั่งที่จะทำงานเมื่อฟอร์มถูกส่ง
});

$("#myForm").submit(function(event){
    event.preventDefault(); // ป้องกันการส่งฟอร์ม
    alert("Form submitted!");
});

$(window).resize(function(){
    // คำสั่งที่จะทำงานเมื่อขนาดหน้าต่างเปลี่ยน
});

$(window).resize(function(){
    $("#myDiv").text("Window resized");
});

$(window).scroll(function(){
    // คำสั่งที่จะทำงานเมื่อเกิดการเลื่อน
});

$(window).scroll(function(){
    $("#myDiv").text("You are scrolling!");
});

$("selector").mouseenter(function(){
    // คำสั่งเมื่อเมาส์เลื่อนเข้า
});

$("selector").mouseleave(function(){
    // คำสั่งเมื่อเมาส์เลื่อนออก
});

$("#myDiv").mouseenter(function(){
    $(this).css("background-color", "lightblue");
});

$("#myDiv").mouseleave(function(){
    $(this).css("background-color", "");
});

$("#myDiv").on({
    mouseenter: function(){
        $(this).css("background-color", "yellow");
    },
    mouseleave: function(){
        $(this).css("background-color", "");
    },
    click: function(){
        $(this).css("background-color", "green");
    }
});