jQuery Event Methods

13 มิ.ย. 2018 , 2,429 Views , หมวดหมู่ jQuery,JavaScript,Ajax ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:jQuery, jQuery Event

เหตุการณ์ของเมาส์	เหตุการณ์แป้นพิมพ์	เหตุการณ์แบบฟอร์ม	เหตุการณ์เอกสาร / หน้าต่าง
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

วิธีที่นิยมในการจัดการเหตุการณ์

click()

$("p").click(function(){
    $(this).hide();
});

$("p").click(function(){

$(this).hide();

});

dblclick()

$("p").dblclick(function(){
    $(this).hide();
});

$("p").dblclick(function(){

$(this).hide();

});

mouseenter()

เมื่อตัวชี้เมาส์เข้าองค์ประกอบ HTML นี้

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

$("#p1").mouseenter(function(){

alert("You entered p1!");

});

mouseleave()

เมื่อตัวชี้เมาส์ออกจากองค์ประกอบ HTML นี้

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

$("#p1").mouseleave(function(){

alert("Bye! You now leave p1!");

});

mousedown()

เมื่อซ้ายปุ่มตรงกลางหรือขวาของเมาส์จะถูกกดลงในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

$("#p1").mousedown(function(){

alert("Mouse down over p1!");

});

mouseup()

เมื่อซ้าย, ปุ่มกลางของเมาส์หรือขวาถูกปล่อยออกมาในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});

$("#p1").mouseup(function(){

alert("Mouse up over p1!");

});

hover()

การรวมกันของการ mouseenter() และ mouseleave()

คือ เมื่อเมาส์เข้าองค์ประกอบ HTML และฟังก์ชั่นที่สองคือการดำเนินการเมื่อเมาส์ออกจากองค์ประกอบ HTML นี้

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});

$("#p1").hover(function(){

alert("You entered p1!");

function(){

alert("Bye! You now leave p1!");

});

focus()

ฟังก์ชั่นจะถูกดำเนินการเมื่อฟิลด์แบบฟอร์มที่ได้รับโฟกัส

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

$("input").focus(function(){

$(this).css("background-color", "#cccccc");

});

blur()

เมื่อเขตข้อมูลฟอร์มสูญเสียโฟกัส

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

$("input").blur(function(){

$(this).css("background-color", "#ffffff");

});

ใช้ on()

$("p").on("click", function(){
    $(this).hide();
});

$("p").on("click", function(){

$(this).hide();

});

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

$("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

jQuery Event Methods

วิธีที่นิยมในการจัดการเหตุการณ์

ใช้ on()

หมวดหมู่

ติดต่อเรา

ติดตามเรา

jQuery Event Methods

วิธีที่นิยมในการจัดการเหตุการณ์

ใช้ on()

หมวดหมู่

Popular Posts

ป้ายกำกับ

ติดต่อเรา

ติดตามเรา