{"id":11989,"date":"2015-02-18T10:14:00","date_gmt":"2015-02-18T10:14:00","guid":{"rendered":"https:\/\/kiencang.net\/2015\/02\/18\/jquery-phuong-thuc-su-kien\/"},"modified":"2015-02-18T10:14:00","modified_gmt":"2015-02-18T10:14:00","slug":"jquery-phuong-thuc-su-kien","status":"publish","type":"post","link":"https:\/\/kiencang.net\/jquery-phuong-thuc-su-kien\/","title":{"rendered":"jQuery – Ph\u01b0\u01a1ng th\u1ee9c s\u1ef1 ki\u1ec7n"},"content":{"rendered":"\n
jQuery cho ph\u00e9p \u0111\u00e1p \u1ee9ng c\u00e1c s\u1ef1 ki\u1ec7n trong trang HTML.<\/p>\n\n\n\n
T\u1ea5t c\u1ea3 nh\u1eefng h\u00e0nh \u0111\u1ed9ng kh\u00e1c nhau tr\u00ean trang web m\u00e0 c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng, \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 s\u1ef1 ki\u1ec7n. M\u1ed9t s\u1ef1 ki\u1ec7n \u0111\u1ea1i di\u1ec7n cho th\u1eddi \u0111i\u1ec3m ch\u00ednh x\u00e1c khi m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 x\u1ea3y ra .<\/p>\n\n\n\n
V\u00ed d\u1ee5:<\/p>\n\n\n\n
Thu\u1eadt ng\u1eef “fires” th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi c\u00e1c s\u1ef1 ki\u1ec7n (event). V\u00ed du: “s\u1ef1 ki\u1ec7n nh\u1ea5n ph\u00edm “fires” th\u1eddi \u0111i\u1ec3m b\u1ea1n nh\u1ea5n m\u1ed9t ph\u00edm”.<\/p>\n\n\n\n
D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 s\u1ef1 ki\u1ec7n DOM ph\u1ed5 bi\u1ebfn:<\/b><\/p>\n\n\n\n Trong jQuery, h\u1ea7u h\u1ebft s\u1ef1 ki\u1ec7n DOM c\u00f3 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c t\u01b0\u01a1ng \u0111\u01b0\u01a1ng jQuery. \u0110\u1ec3 g\u00e1n m\u1ed9t s\u1ef1 ki\u1ec7n click v\u00e0o t\u1ea5t c\u1ea3 c\u00e1c \u0111o\u1ea1n v\u0103n tr\u00ean m\u1ed9t trang, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m nh\u01b0 sau:<\/p>\n\n\n\n B\u01b0\u1edbc ti\u1ebfp theo l\u00e0 x\u00e1c \u0111\u1ecbnh nh\u1eefng g\u00ec s\u1ebd x\u1ea3y ra khi s\u1ef1 ki\u1ec7n di\u1ec5n ra. B\u1ea1n ph\u1ea3i vi\u1ebft m\u1ed9t h\u00e0m cho s\u1ef1 ki\u1ec7n:<\/p>\n\n\n\n $(document).ready()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c click()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c click g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m n\u00e0y th\u1ef1c thi khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y n\u00f3i r\u1eb1ng: Khi m\u1ed9t click x\u1ea3y ra tr\u00ean th\u1ebb <p> n\u00e0o \u0111\u00f3; \u1ea9n th\u1ebb <p> \u1ea5y:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n dblclick()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c dbclick() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m n\u00e0y th\u1ef1c thi khi ng\u01b0\u1eddi click \u0111\u00fap v\u00e0o m\u1ed9t th\u00e0nh ph\u1ea7n HTML:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n mouseenter()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c mouseenter() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho m\u1ed9t ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m n\u00e0y s\u1ebd th\u1ef1c thi khi con tr\u1ecf chu\u1ed9t \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o khu v\u1ef1c c\u1ee7a ph\u1ea7n t\u1eed HTML \u0111\u01b0\u1ee3c ch\u1ecdn:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n mouseleave()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c mouseleave() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho m\u1ed9t ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m \u0111\u01b0\u1ee3c th\u1ef1c thi khi con tr\u1ecf chu\u1ed9t \u0111\u01b0\u1ee3c \u0111\u01b0a ra kh\u1ecfi ph\u1ea7n t\u1eed HTML \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n mousedown()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c mousedown() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho m\u1ed9t ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m \u0111\u01b0\u1ee3c th\u1ef1c thi khi con tr\u1ecf tr\u00e1i chu\u1ed9t \u0111\u01b0\u1ee3c nh\u1ea5n trong khi chu\u1ed9t di chuy\u1ec3n qua ph\u1ea9n t\u1eeb HTML \u0111\u00f3. (c\u00e1 nh\u00e2n m\u00ecnh th\u1ea5y n\u00f3 r\u1ea5t gi\u1ed1ng h\u00e0m click)<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n mouseup()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c mouseup() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n v\u00e0o ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n H\u00e0m \u0111\u01b0\u1ee3c th\u1ef1c thi khi, chu\u1ed9t tr\u00e1i \u0111\u01b0\u1ee3c nh\u1ea3 trong khi chu\u1ed9t di chuy\u1ec3n qua ph\u1ea7n t\u1eed HTML:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n hover()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c hover()c\u00f3 hai ch\u1ee9c n\u0103ng v\u00e0 l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a hai h\u00e0m mouseenter() v\u00e0 mouseleave().<\/p>\n\n\n\n H\u00e0m \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c th\u1ef1c thi khi chu\u1ed9t di chuy\u1ec3n v\u00e0o th\u00e0nh ph\u1ea7n HTML, v\u00e0 h\u00e0m th\u1ee9 hai \u0111\u01b0\u1ee3c th\u1ef1c thi khi chu\u1ed9t di chuy\u1ec3n ra ngo\u00e0i th\u00e0nh ph\u1ea7n HTML:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n focus()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c focus() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n v\u00e0o c\u00e1c tr\u01b0\u1eddng trong form HTML.<\/p>\n\n\n\n H\u00e0m n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c thi khi tr\u01b0\u1eddng trong form \u0111\u01b0\u1ee3c “focus”:<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n blur()<\/b><\/p>\n\n\n\n Ph\u01b0\u01a1ng th\u1ee9c blur() g\u1eafn m\u1ed9t h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n v\u00e0o c\u00e1c tr\u01b0\u1eddng trong form HTML.<\/p>\n\n\n\n H\u00e0m n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c thi khi tr\u01b0\u1eddng trong form m\u1ea5t focus.<\/p>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n focus() v\u00e0 blur() x\u1eed l\u00fd hai s\u1ef1 ki\u1ec7n tr\u00e1i ng\u01b0\u1ee3c nhau.<\/p>\n","protected":false},"excerpt":{"rendered":" jQuery cho ph\u00e9p \u0111\u00e1p \u1ee9ng c\u00e1c s\u1ef1 ki\u1ec7n trong trang HTML. S\u1ef1 ki\u1ec7n l\u00e0 g\u00ec? T\u1ea5t c\u1ea3 nh\u1eefng h\u00e0nh \u0111\u1ed9ng kh\u00e1c nhau tr\u00ean trang web m\u00e0 c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng, \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 s\u1ef1 ki\u1ec7n. M\u1ed9t s\u1ef1 ki\u1ec7n \u0111\u1ea1i di\u1ec7n cho th\u1eddi \u0111i\u1ec3m ch\u00ednh x\u00e1c khi m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 x\u1ea3y ra . V\u00ed d\u1ee5: …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[237],"tags":[],"yoast_head":"\nChu\u1ed9t<\/th> B\u00e0n ph\u00edm<\/th> Form<\/th> T\u00e0i li\u1ec7u\/C\u1eeda s\u1ed5<\/th><\/tr> click (nh\u00e1y \u0111\u01a1n)<\/td> nh\u1ea5n ph\u00edm<\/td> g\u1eedi<\/td> t\u1ea3i<\/td><\/tr> nh\u00e1y k\u00e9p<\/td> ph\u00edm xu\u1ed1ng<\/td> thay \u0111\u1ed5i<\/td> thay \u0111\u1ed5i k\u00edch c\u1ee1<\/td><\/tr> di chuy\u1ec3n v\u00e0o<\/td> ph\u00edm l\u00ean<\/td> focus<\/td> scroll<\/td><\/tr> di chuy\u1ec3n ra<\/td> <\/td> blur<\/td> unload<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nC\u00fa ph\u00e1p cho ph\u01b0\u01a1ng th\u1ee9c s\u1ef1 ki\u1ec7n trong jQuery<\/h2>\n\n\n\n
$(\"p\").click();<\/code><\/pre>\n\n\n\n
$(\"p\").click(function(){\n\/\/ vi\u1ebft m\u00e3 \u1edf \u0111\u00e2y\n});<\/code><\/pre>\n\n\n\n
\n\n\n\nNh\u1eefng ph\u01b0\u01a1ng th\u1ee9c s\u1ef1 ki\u1ec7n ph\u1ed5 bi\u1ebfn trong jQuery<\/h2>\n\n\n\n
$(document).ready()<\/code> cho ph\u00e9p ch\u00fang ta th\u1ef1c hi\u1ec7n h\u00e0m khi t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c t\u1ea3i xong ho\u00e0n to\u00e0n. S\u1ef1 ki\u1ec7n n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c gi\u1ea3i th\u00edch \u1edf b\u00e0i c\u00fa ph\u00e1p trong jQuery.<\/p>\n\n\n\n
\n\n\n\n$(\"p\").click(function(){\n$(this).hide();\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"p\").dblclick(function(){\n$(this).hide();\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"#p1\").mouseenter(function(){\nalert(\"You entered p1!\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"#p1\").mouseleave(function(){\nalert(\"Bye! You now leave p1!\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"#p1\").mousedown(function(){\nalert(\"Mouse down over p1!\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"#p1\").mouseup(function(){\nalert(\"Mouse up over p1!\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"#p1\").hover(function(){\nalert(\"You entered p1!\");\n},\nfunction(){\nalert(\"Bye! You now leave p1!\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"input\").focus(function(){\n$(this).css(\"background-color\", \"#cccccc\");\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n$(\"input\").blur(function(){\n$(this).css(\"background-color\", \"#ffffff\");\n});<\/code><\/pre>\n\n\n\n