{"id":2582,"date":"2023-07-12T00:58:47","date_gmt":"2023-07-11T16:58:47","guid":{"rendered":"https:\/\/yukihiew.com\/?p=2582"},"modified":"2023-07-12T01:01:11","modified_gmt":"2023-07-11T17:01:11","slug":"js-composition-events","status":"publish","type":"post","link":"https:\/\/yukihiew.com\/js-composition-events\/","title":{"rendered":"\u3010Vue\u7b46\u8a18\u3011\u76e3\u807d\u62fc\u5b57\u8f38\u5165\u6cd5\u89f8\u767c\u7684 composition events"},"content":{"rendered":"\n
\u4e2d\u6587\u8f38\u5165\u6cd5\u8ddf\u82f1\u6587\u8f38\u5165\u6700\u5927\u7684\u5340\u5225\u5927\u6982\u5c31\u662f\u62fc\u97f3\u4e86\u5427~<\/p>\n\n\n\n
\u9019\u6b21\u5728\u5c08\u6848\u4e2d\u78b0\u5230\u8981\u9650\u5236\u8f38\u5165\u7684\u5b57\u6578\uff0c\u4f46\u53c8\u4e0d\u80fd\u628a\u6b63\u5728\u8f38\u5165\u7684\u62fc\u97f3\u9078\u5b57\u7d66\u963b\u64cb\u6389\uff0c\u6240\u4ee5\u4e0d\u80fd\u55ae\u7d14\u9650\u5236\u8f38\u5165\u4e2d\u7684\u5b57\u6578\uff0c\u65bc\u662f\u67e5\u5230\u4e86\u9019\u500b\u62fc\u97f3\u8f38\u5165\u6cd5\u6703\u89f8\u767c\u7684\u4e8b\u4ef6 composition event\u3002<\/p>\n\n\n
\u62fc\u97f3\u8f38\u5165\u6642\uff0c\u89f8\u767c\u968e\u6bb5\u7e3d\u5171\u6709\u4e09\u500b\uff1a<\/p>\n\n\n\n
compositionstart \u958b\u59cb\u8f38\u5165(\u62fc\u97f3\u3001\u6ce8\u97f3)<\/p>\n\n\n\n
compositionupdate \u9078\u5b57\u6216\u62fc\u97f3\u66f4\u6539<\/p>\n\n\n\n
compositionend \u7d50\u675f\u8f38\u5165(\u62fc\u97f3\u3001\u6ce8\u97f3)<\/p>\n\n\n
Q: chrome 49 \u80fd\u76e3\u807d compositionstart \/ compositionend \u55ce?<\/p>\n\n\n\n
\u53ef\u4ee5\uff0ccomposition events \u652f\u63f4 chrome ver.15-\u6700\u65b0\u3002<\/p>\n\n\n\n
Q: chrome 49 \u8ddf\u65b0\u7248\u672c chrome (ver.114) \u5728\u89f8\u767c\u4e0a\u7684\u4e0d\u540c?<\/p>\n\n\n\n
A: chrome 49 \u8f38\u5165\u4e2d\u6587\u7d50\u675f\u5f8c\u7684 enter \u6703\u89f8\u767c input\uff0c\u65b0\u7248\u4e0d\u6703\uff0c\u8981\u53e6\u5916\u8655\u7406\uff0c\u4e26\u4e14\u65b0\u7248\u5c0f\u9375\u76e4\u82f1\u6578\u6703\u88ab\u7576\u6210\u4e2d\u6587\u5b57\u5224\u65b7\u3002<\/p>\n\n\n
Q: \u7528 input \/ keypress \/ keyup \u7684\u5f71\u97ff?<\/p>\n\n\n\n
A: input \u6253\u6ce8\u97f3\u6703\u76f4\u63a5\u5448\u73fe\u6ce8\u97f3\u5728\u4e0a\u9762\uff0c\u56e0\u70bahandler\u5c07event.value\u908a\u8f38\u5165\u908a\u5132\u5b58\u7684\u95dc\u4fc2\u3002\u7528keypress\u7684\u8a71\u4e0d\u6703\u6709\u4e0a\u8ff0\u5f71\u97ff\uff0c\u4f46\u662f\u8f38\u5165\u5b8c\u8981\u518d\u6309\u4e00\u6b21enter\u624d\u6703\u89f8\u767c\u5230\u5132\u5b58\u7684handler\u3002<\/p>\n\n\n\n
\u5982\u679c\u6709\u9650\u5236\u5b57\u6578\uff0c\u8f38\u5165\u8d85\u904e\u9650\u5236\u7684\u8a71\uff0ckeyup \u6703\u5361\u5728\u6ce8\u97f3\u8f38\u5165\u7684\u5730\u65b9\u3002<\/p>\n\n\n
Q: v-model \u5728\u8655\u7406\u4e2d\u6587\u8f38\u5165\u7684\u539f\u7406?<\/p>\n\n\n\n
A: \u662f\u4f7f\u7528 compositionstart \/ compositionend \u53bb\u5224\u65b7\u5132\u5b58\u6642\u6a5f\u3002<\/p>\n\n\n\n
Q: \u600e\u9ebc\u5229\u7528 compositionstart \/ compositionend \u642d\u914d\u8f38\u5165\u8655\u7406\u7684handler?<\/p>\n\n\n\n
A: \u642d\u914dinput\uff0c\u89f8\u767c\u9806\u5e8f compositionstart > compositionupdate > compositionend > input\uff0c\u8655\u7406\u8f38\u5165\u7684 handler \u653e\u5728 input\uff0c\u6240\u4ee5\u5728 compositionstart \u89f8\u767c\u6642\u8b93\u8f38\u5165\u6642 input \u7684\u89f8\u767c\u88ab\u8df3\u904e\uff0ccompositionend \u89f8\u767c\u6642\u6062\u5fa9 input \u89f8\u767c\uff0c\u5373\u53ef\u5728\u5b8c\u6210\u4e2d\u6587\u8f38\u5165\u6642\u624d\u5c07 value \u5b58\u9032 input \u88e1\u7684 handler\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e2d\u6587\u8f38\u5165\u6cd5\u8ddf\u82f1\u6587\u8f38\u5165\u6700\u5927\u7684\u5340\u5225\u5927\u6982\u5c31\u662f\u62fc\u97f3\u4e86\u5427~ \u9019\u6b21\u5728\u5c08\u6848\u4e2d\u78b0\u5230\u8981\u9650\u5236\u8f38\u5165\u7684\u5b57\u6578\uff0c\u4f46\u53c8\u4e0d\u80fd\u628a\u6b63\u5728\u8f38\u5165\u7684\u62fc\u97f3\u9078 […]<\/p>\n","protected":false},"author":1,"featured_media":2583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[123],"class_list":["post-2582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-124","tag-vue","entry","has-media"],"yoast_head":"\n