{"id":6091,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=6091"},"modified":"2026-09-25T15:27:16","modified_gmt":"2026-09-25T15:27:16","slug":"jquery-chto-nuzhno-znat-ob-obrabotke-sobytij","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/jquery-chto-nuzhno-znat-ob-obrabotke-sobytij\/","title":{"rendered":"\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 jQuery: \u043c\u0435\u0442\u043e\u0434 .on(), .off(), \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 event"},"content":{"rendered":"

\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 jQuery<\/strong> — \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043a\u043b\u0438\u043a, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b, \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438) \u043c\u0435\u0442\u043e\u0434\u043e\u043c .on()<\/code> \u0438 \u0441\u043d\u044f\u0442\u0438\u0435 \u0435\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u043c .off()<\/code>. \u0417\u0430\u043f\u0438\u0441\u044c $(\"#btn\").on(\"click\", handler)<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442: \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 click<\/code>, jQuery \u0432\u044b\u0437\u043e\u0432\u0435\u0442 handler<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0441\u0442 \u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f event<\/code>. \u041d\u0438\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u0444\u043e\u0440\u043c\u044b .on()<\/code>, \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u043f\u043e\u043b\u044f event<\/code>, \u043e\u0442\u043c\u0435\u043d\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u0427\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/a><\/li>\n
  2. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/li>\n
  3. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 .on() \u0438 \u0440\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432<\/a><\/li>\n
  4. \u041f\u0440\u044f\u043c\u0430\u044f \u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/a><\/li>\n
  5. \u041e\u0442\u043c\u0435\u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u044f<\/a><\/li>\n
  6. \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d, .one() \u0438 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/a><\/li>\n
  7. \u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/a><\/li>\n
  8. \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0431\u0435\u0437 jQuery<\/a><\/li>\n
  9. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  10. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  11. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  12. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b 24.09.2026 \u043d\u0430 jQuery 4.0.0 (\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043d\u0430 3.7.1) \u0432 jsdom 30.1 \u043f\u043e\u0434 Node.js 22. jQuery \u0441\u0435\u0433\u043e\u0434\u043d\u044f — \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u043d\u0430 addEventListener<\/code>.<\/p>\n

    \u0427\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/h2>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    \u0421\u043e\u0431\u044b\u0442\u0438\u0435<\/td>\n\u0441\u0438\u0433\u043d\u0430\u043b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438<\/td>\nclick<\/code>, submit<\/code>, keydown<\/code>, input<\/code><\/td>\n<\/tr>\n
    \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/td>\n\u0432\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438<\/td>\nfunction (event) { ... }<\/code><\/td>\n<\/tr>\n
    \u041e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/td>\n\u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438<\/td>\nevent.target<\/code>, event.type<\/code><\/td>\n<\/tr>\n
    \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/td>\n\u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u043c<\/td>\n\u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0412\u0441\u043f\u043b\u044b\u0442\u0438\u0435 (bubbling): \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e\u0441\u043b\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c \u0434\u043e document<\/code> \u0438 window<\/code>. \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n

    \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h2>\n

    \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447: \u0444\u043e\u0440\u043c\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0443\u043d\u043a\u0442, \u043a\u043d\u043e\u043f\u043a\u0430 \u00abx\u00bb \u0443\u0434\u0430\u043b\u044f\u0435\u0442. \u0424\u0430\u0439\u043b jQuery \u043b\u0435\u0436\u0438\u0442 \u0440\u044f\u0434\u043e\u043c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p>\n

    <!DOCTYPE html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><<\/span>title<\/span>><\/span>\u0421\u043e\u0431\u044b\u0442\u0438\u044f jQuery<\/<\/span>title<\/span>><\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>form<\/span> id<\/span>=<\/span>\"add-form\"<\/span>><\/span>\n    <<\/span>label<\/span>><\/span>\u0417\u0430\u0434\u0430\u0447\u0430 <<\/span>input<\/span> id<\/span>=<\/span>\"title\"<\/span>><\/<\/span>label<\/span>><\/span>\n    <<\/span>button<\/span> type<\/span>=<\/span>\"submit\"<\/span>><\/span>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c<\/<\/span>button<\/span>><\/span>\n  <\/<\/span>form<\/span>><\/span>\n  <<\/span>ul<\/span> id<\/span>=<\/span>\"tasks\"<\/span>><\/span>\n    <<\/span>li<\/span>><\/span>\u041a\u0443\u043f\u0438\u0442\u044c \u043c\u043e\u043b\u043e\u043a\u043e <<\/span>button<\/span> class<\/span>=<\/span>\"remove\"<\/span>><\/span>x<\/<\/span>button<\/span>><\/<\/span>li<\/span>><\/span>\n  <\/<\/span>ul<\/span>><\/span>\n  <<\/span>p<\/span> id<\/span>=<\/span>\"log\"<\/span>><\/<\/span>p<\/span>><\/span>\n\n  <<\/span>script<\/span> src<\/span>=<\/span>\"jquery-4.0.0.min.js\"<\/span>><\/<\/span>script<\/span>><\/span>\n  <<\/span>script<\/span>><\/span>\n    <\/span>$<\/span>(<\/span>function<\/span> () {<\/span>\n      <\/span>\/\/ \u041f\u0440\u044f\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a: \u0432\u0438\u0441\u0438\u0442 \u043d\u0430 \u0441\u0430\u043c\u043e\u0439 \u0444\u043e\u0440\u043c\u0435<\/span>\n      <\/span>$<\/span>(<\/span>\"#add-form\"<\/span>).<\/span>on<\/span>(<\/span>\"submit\"<\/span>, <\/span>function<\/span> (<\/span>event<\/span>) {<\/span>\n        <\/span>event<\/span>.<\/span>preventDefault<\/span>(); <\/span>\/\/ \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/span>\n        <\/span>const<\/span> <\/span>title<\/span> <\/span>=<\/span> <\/span>$<\/span>(<\/span>\"#title\"<\/span>).<\/span>val<\/span>().<\/span>trim<\/span>();<\/span>\n        <\/span>if<\/span> (<\/span>!<\/span>title<\/span>) <\/span>return<\/span>;<\/span>\n        <\/span>$<\/span>(<\/span>\"<li>\"<\/span>).<\/span>text<\/span>(<\/span>title<\/span> <\/span>+<\/span> <\/span>\" \"<\/span>)<\/span>\n          .<\/span>append<\/span>(<\/span>'<button class=\"remove\">x<\/button>'<\/span>)<\/span>\n          .<\/span>appendTo<\/span>(<\/span>\"#tasks\"<\/span>);<\/span>\n        <\/span>$<\/span>(<\/span>\"#title\"<\/span>).<\/span>val<\/span>(<\/span>\"\"<\/span>);<\/span>\n      });<\/span>\n\n      <\/span>\/\/ \u0414\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a: \u0432\u0438\u0441\u0438\u0442 \u043d\u0430 \u0441\u043f\u0438\u0441\u043a\u0435, \u043b\u043e\u0432\u0438\u0442 \u043a\u043b\u0438\u043a\u0438 \u043f\u043e .remove<\/span>\n      <\/span>$<\/span>(<\/span>\"#tasks\"<\/span>).<\/span>on<\/span>(<\/span>\"click\"<\/span>, <\/span>\".remove\"<\/span>, <\/span>function<\/span> () {<\/span>\n        <\/span>const<\/span> <\/span>$li<\/span> <\/span>=<\/span> <\/span>$<\/span>(<\/span>this<\/span>).<\/span>closest<\/span>(<\/span>\"li\"<\/span>);<\/span>\n        <\/span>$<\/span>(<\/span>\"#log\"<\/span>).<\/span>text<\/span>(<\/span>\"\u0423\u0434\u0430\u043b\u0435\u043d\u043e: \"<\/span> <\/span>+<\/span> <\/span>$li<\/span>.<\/span>contents<\/span>().<\/span>first<\/span>().<\/span>text<\/span>().<\/span>trim<\/span>());<\/span>\n        <\/span>$li<\/span>.<\/span>remove<\/span>();<\/span>\n      });<\/span>\n    });<\/span>\n  <\/<\/span>script<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
    \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u00ab\u0421\u0434\u0430\u0442\u044c \u043e\u0442\u0447\u0435\u0442\u00bb, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u00ab\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\u00bb — \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u0434\u0432\u0430 \u043f\u0443\u043d\u043a\u0442\u0430. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u00abx\u00bb \u0443 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 — \u043e\u043d \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442, \u0430 \u0432 \u0430\u0431\u0437\u0430\u0446\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u00ab\u0423\u0434\u0430\u043b\u0435\u043d\u043e: \u0421\u0434\u0430\u0442\u044c \u043e\u0442\u0447\u0435\u0442\u00bb. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u0438\u0441\u0438\u0442 \u043d\u0430 <ul><\/code>.<\/p>\n
    \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 .on() \u0438 \u0440\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    \u0417\u0430\u043f\u0438\u0441\u044c<\/th>\n\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442<\/th>\n<\/tr>\n<\/thead>\n
    .on(\"click\", fn)<\/code><\/td>\n\u043f\u0440\u044f\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445<\/td>\n<\/tr>\n
    .on(\"click\", \".item\", fn)<\/code><\/td>\n\u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439: \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u043e\u0434 .item<\/code><\/td>\n<\/tr>\n
    .on(\"click\", null, {id: 7}, fn)<\/code><\/td>\n\u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 event.data<\/code><\/td>\n<\/tr>\n
    .on({click: fn1, mouseenter: fn2})<\/code><\/td>\n\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u0434\u043d\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c<\/td>\n<\/tr>\n
    .on(\"click keydown\", fn)<\/code><\/td>\n\u043e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u043f\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b<\/td>\n<\/tr>\n
    .one(\"click\", fn)<\/code><\/td>\n\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435<\/td>\n<\/tr>\n
    .off(\"click\", fn)<\/code><\/td>\n\u0441\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\u043d\u0443\u0436\u043d\u0430 \u0442\u0430 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e)<\/td>\n<\/tr>\n
    .off(\".menu\")<\/code><\/td>\n\u0441\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d menu<\/code><\/td>\n<\/tr>\n
    .trigger(\"click\")<\/code><\/td>\n\u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 .click(fn)<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a .on(\"click\", fn)<\/code>, \u043d\u043e \u0441 jQuery 3.3 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438. \u041c\u0435\u0442\u043e\u0434\u044b .bind()<\/code>, .unbind()<\/code>, .delegate()<\/code> \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438 \u0441 3.0 (\u0432 4.0.0 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c), \u0430 .live()<\/code> \u0443\u0434\u0430\u043b\u0435\u043d \u0432 1.9. \u0412 \u043d\u043e\u0432\u043e\u043c \u043a\u043e\u0434\u0435 — \u0442\u043e\u043b\u044c\u043a\u043e .on()<\/code> \u0438 .off()<\/code>.<\/p>\n
    \u041f\u0440\u044f\u043c\u0430\u044f \u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h2>\n
    \u041f\u0440\u044f\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/strong> \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u043c \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 .on()<\/code>. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0437\u0436\u0435, \u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442.<\/p>\n
    \u0414\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/strong> \u0432\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043a\u0430 (\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440), \u0430 jQuery \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0448\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043f\u0440\u043e\u0448\u043b\u043e \u043b\u0438 \u043e\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0442\u043e\u043c\u043a\u0430, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u043e\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440. \u041f\u043b\u044e\u0441 — \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0442\u043d\u0438. \u0426\u0435\u043d\u0430 — \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0431\u0435\u0440\u0438\u0442\u0435 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439, \u0430 \u043d\u0435 document<\/code>.<\/p>\n
    \u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432\u0430\u0436\u043d\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n
    <<\/span>ul<\/span> id<\/span>=<\/span>\"menu\"<\/span>><\/span>\n  <<\/span>li<\/span>><<\/span>a<\/span> href<\/span>=<\/span>\"\/about\"<\/span>><<\/span>b<\/span>><\/span>\u041e \u043d\u0430\u0441<\/<\/span>b<\/span>><\/<\/span>a<\/span>><\/<\/span>li<\/span>><\/span>\n<\/<\/span>ul<\/span>><\/span><\/code><\/pre>\n
    $<\/span>(<\/span>\"#menu\"<\/span>).<\/span>on<\/span>(<\/span>\"click\"<\/span>, <\/span>\"a\"<\/span>, { <\/span>section<\/span>:<\/span> <\/span>\"menu\"<\/span> }, <\/span>function<\/span> (<\/span>event<\/span>) {<\/span>\n  <\/span>event<\/span>.<\/span>preventDefault<\/span>();<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>type<\/span>);                   <\/span>\/\/ click<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>target<\/span>.<\/span>tagName<\/span>);         <\/span>\/\/ B - \u0433\u0434\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>this<\/span>.<\/span>tagName<\/span>);                 <\/span>\/\/ A - \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \"a\"<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>currentTarget<\/span> <\/span>===<\/span> <\/span>this<\/span>); <\/span>\/\/ true<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>delegateTarget<\/span>.<\/span>id<\/span>);      <\/span>\/\/ menu - \u0433\u0434\u0435 \u0432\u0438\u0441\u0438\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>data<\/span>.<\/span>section<\/span>);           <\/span>\/\/ menu<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>isDefaultPrevented<\/span>());   <\/span>\/\/ true<\/span>\n});<\/span>\n\n$<\/span>(<\/span>\"#menu b\"<\/span>).<\/span>trigger<\/span>(<\/span>\"click\"<\/span>);<\/span><\/code><\/pre>\n
    \u041a\u043b\u0438\u043a \u043f\u043e \u0436\u0438\u0440\u043d\u043e\u043c\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u0434\u0430\u0435\u0442 target<\/code> = <b><\/code>, \u0430 this<\/code> = <a><\/code>. \u0415\u0441\u043b\u0438 \u0432 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 event.target<\/code>, \u043a\u043e\u0434 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u044f\u0442 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u043b\u0438 <span><\/code>. \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 event.originalEvent<\/code>.<\/p>\n
    \u0421\u043e\u0431\u044b\u0442\u0438\u044f focus<\/code> \u0438 blur<\/code> \u0441\u0430\u043c\u0438 \u043d\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0442, \u043d\u043e jQuery \u043f\u0440\u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0445 \u043d\u0430 focusin<\/code> \u0438 focusout<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 $(\"form\").on(\"focus\", \"input\", fn)<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e event.type<\/code> \u0432 \u0442\u0430\u043a\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u0430\u0432\u0435\u043d focusin<\/code>, \u0430 \u043d\u0435 focus<\/code> (\u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432 jQuery 4.0.0 \u0438 3.7.1) — \u043d\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \"focus\"<\/code>. \u0412 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u043c\u0435\u043d\u044b \u043d\u0435\u0442.<\/p>\n
    \u041e\u0442\u043c\u0435\u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u044f<\/h2>\n\n\n\n\n\n\n\n\n
    \u0412\u044b\u0437\u043e\u0432<\/th>\n\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/th>\n\u0412\u0441\u043f\u043b\u044b\u0442\u0438\u0435 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c<\/th>\n\u0414\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/th>\n<\/tr>\n<\/thead>\n
    event.preventDefault()<\/code><\/td>\n\u043e\u0442\u043c\u0435\u043d\u0435\u043d\u043e<\/td>\n\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f<\/td>\n\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f<\/td>\n<\/tr>\n
    event.stopPropagation()<\/code><\/td>\n\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f<\/td>\n\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e<\/td>\n\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f<\/td>\n<\/tr>\n
    event.stopImmediatePropagation()<\/code><\/td>\n\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f<\/td>\n\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e<\/td>\n\u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f<\/td>\n<\/tr>\n
    return false<\/code> \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 jQuery<\/td>\n\u043e\u0442\u043c\u0435\u043d\u0435\u043d\u043e<\/td>\n\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e<\/td>\n\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    return false<\/code> \u0432 jQuery — \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 preventDefault()<\/code> \u0438 stopPropagation()<\/code>. \u0412 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c addEventListener<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0442 false<\/code> \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442. \u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043d\u0435 \u0441\u0442\u043e\u0438\u0442: \u044d\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u044b\u0448\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u043c\u0435\u043d\u044e \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0441\u043d\u0430\u0440\u0443\u0436\u0438.<\/p>\n
    \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d, .one() \u0438 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/h2>\n
    const<\/span> <\/span>$btn<\/span> <\/span>=<\/span> <\/span>$<\/span>(<\/span>\"#save\"<\/span>);<\/span>\n$btn<\/span>.<\/span>on<\/span>(<\/span>\"click.analytics\"<\/span>, () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430\"<\/span>));<\/span>\n$btn<\/span>.<\/span>on<\/span>(<\/span>\"click.ui\"<\/span>, () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\"<\/span>));<\/span>\n$btn<\/span>.<\/span>one<\/span>(<\/span>\"click\"<\/span>, () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\"<\/span>));<\/span>\n\n$btn<\/span>.<\/span>trigger<\/span>(<\/span>\"click\"<\/span>);  <\/span>\/\/ \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437<\/span>\n$btn<\/span>.<\/span>off<\/span>(<\/span>\".analytics\"<\/span>); <\/span>\/\/ \u0441\u043d\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/span>\n$btn<\/span>.<\/span>trigger<\/span>(<\/span>\"click\"<\/span>);  <\/span>\/\/ \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/span>\n\n\/\/ \u0421\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438<\/span>\n$btn<\/span>.<\/span>on<\/span>(<\/span>\"task:done\"<\/span>, (<\/span>event<\/span>, <\/span>id<\/span>, <\/span>title<\/span>) => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>id<\/span>, <\/span>title<\/span>));<\/span>\n$btn<\/span>.<\/span>trigger<\/span>(<\/span>\"task:done\"<\/span>, [<\/span>7<\/span>, <\/span>\"\u041e\u0442\u0447\u0435\u0442\"<\/span>]); <\/span>\/\/ 7 \u041e\u0442\u0447\u0435\u0442<\/span><\/code><\/pre>\n
    \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d (click.analytics<\/code>) — \u043c\u0435\u0442\u043a\u0430 \u0433\u0440\u0443\u043f\u043f\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u0447\u0443\u0436\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438. \u041b\u044e\u0431\u043e\u0435 \u0438\u043c\u044f, \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c (task:done<\/code>), jQuery \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c: \u043e\u043d\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 .trigger()<\/code> \u0438\u043b\u0438 .triggerHandler()<\/code>.<\/p>\n
    \u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/h2>\n
    1. \u041f\u0440\u044f\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0449\u0435 \u043d\u0435\u0442.<\/strong><\/p>\n
    \u0421\u043f\u0438\u0441\u043e\u043a — \u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435: \u043e\u0434\u0438\u043d \u043f\u0443\u043d\u043a\u0442 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00abx\u00bb.<\/p>\n
    $<\/span>(<\/span>\"#tasks .remove\"<\/span>).<\/span>on<\/span>(<\/span>\"click\"<\/span>, <\/span>function<\/span> () {<\/span>\n  <\/span>$<\/span>(<\/span>this<\/span>).<\/span>closest<\/span>(<\/span>\"li\"<\/span>).<\/span>remove<\/span>();<\/span>\n});<\/span>\n$<\/span>(<\/span>\"#tasks\"<\/span>).<\/span>append<\/span>(<\/span>'<li>\u041d\u043e\u0432\u0430\u044f <button class=\"remove\">x<\/button><\/li>'<\/span>);<\/span>\n$<\/span>(<\/span>\"#tasks .remove\"<\/span>).<\/span>last<\/span>().<\/span>trigger<\/span>(<\/span>\"click\"<\/span>);<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>$<\/span>(<\/span>\"#tasks li\"<\/span>).<\/span>length<\/span>); <\/span>\/\/ 2 - \u043d\u043e\u0432\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u043d\u0435 \u0443\u0434\u0430\u043b\u0438\u043b\u0441\u044f<\/span><\/code><\/pre>\n
    \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043a\u043d\u043e\u043f\u043a\u0435, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 .on()<\/code>. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: $(\"#tasks\").on(\"click\", \".remove\", fn)<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0442\u043e\u0442 \u0436\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442 1<\/code>.<\/p>\n
    2. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/strong><\/p>\n
    function<\/span> <\/span>initSave<\/span>() {<\/span>\n  <\/span>$<\/span>(<\/span>\"#save\"<\/span>).<\/span>on<\/span>(<\/span>\"click\"<\/span>, () => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>\"\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e\"<\/span>));<\/span>\n}<\/span>\ninitSave<\/span>();<\/span>\ninitSave<\/span>(); <\/span>\/\/ \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0431\u043b\u043e\u043a\u0430<\/span>\n$<\/span>(<\/span>\"#save\"<\/span>).<\/span>trigger<\/span>(<\/span>\"click\"<\/span>); <\/span>\/\/ \"\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e\" \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b<\/span><\/code><\/pre>\n
    \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 .on()<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439: $(\"#save\").off(\"click.save\").on(\"click.save\", fn)<\/code>. \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u0434\u0432\u0443\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 initSave()<\/code> \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437.<\/p>\n
    3. \u0421\u0442\u0440\u043e\u043a\u0430 \u0432 data \u0431\u0435\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430.<\/strong><\/p>\n
    $<\/span>(<\/span>\"#save\"<\/span>).<\/span>on<\/span>(<\/span>\"click\"<\/span>, <\/span>\"hello\"<\/span>, <\/span>function<\/span> (<\/span>event<\/span>) {<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>event<\/span>.<\/span>data<\/span>);<\/span>\n});<\/span>\n$<\/span>(<\/span>\"#save\"<\/span>).<\/span>trigger<\/span>(<\/span>\"click\"<\/span>); <\/span>\/\/ \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e<\/span><\/code><\/pre>\n
    \u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 — \u0441\u0442\u0440\u043e\u043a\u0430, jQuery \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0435\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0438 \u0438\u0449\u0435\u0442 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 <hello><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435: \u044f\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c null<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 — .on(\"click\", null, \"hello\", fn)<\/code> — \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 { msg: \"hello\" }<\/code>.<\/p>\n
    \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0431\u0435\u0437 jQuery<\/h2>\n
    const<\/span> <\/span>list<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>\"#tasks\"<\/span>);<\/span>\nconst<\/span> <\/span>controller<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>AbortController<\/span>();<\/span>\n\nlist<\/span>.<\/span>addEventListener<\/span>(<\/span>\"click\"<\/span>, (<\/span>event<\/span>) => {<\/span>\n  <\/span>const<\/span> <\/span>btn<\/span> <\/span>=<\/span> <\/span>event<\/span>.<\/span>target<\/span>.<\/span>closest<\/span>(<\/span>\".remove\"<\/span>);<\/span>\n  <\/span>if<\/span> (<\/span>!<\/span>btn<\/span> <\/span>||<\/span> <\/span>!<\/span>list<\/span>.<\/span>contains<\/span>(<\/span>btn<\/span>)) <\/span>return<\/span>; <\/span>\/\/ \u043a\u043b\u0438\u043a \u043d\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435<\/span>\n  <\/span>btn<\/span>.<\/span>closest<\/span>(<\/span>\"li\"<\/span>).<\/span>remove<\/span>();<\/span>\n}, { <\/span>signal<\/span>:<\/span> <\/span>controller<\/span>.<\/span>signal<\/span> });<\/span>\n\n\/\/ controller.abort(); \/\/ \u0441\u043d\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/span><\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n
    jQuery<\/th>\n\u041d\u0430\u0442\u0438\u0432\u043d\u043e<\/th>\n<\/tr>\n<\/thead>\n
    .on(\"click\", fn)<\/code><\/td>\naddEventListener(\"click\", fn)<\/code><\/td>\n<\/tr>\n
    .on(\"click\", \".remove\", fn)<\/code><\/td>\n\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 + event.target.closest(\".remove\")<\/code><\/td>\n<\/tr>\n
    .one(\"click\", fn)<\/code><\/td>\naddEventListener(\"click\", fn, { once: true })<\/code><\/td>\n<\/tr>\n
    .off(\".ns\")<\/code><\/td>\nAbortController<\/code> \u0438 signal<\/code> \u0438\u043b\u0438 removeEventListener<\/code> \u0441 \u0442\u043e\u0439 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439<\/td>\n<\/tr>\n
    .trigger(\"task:done\")<\/code><\/td>\ndispatchEvent(new CustomEvent(\"task:done\", { detail }))<\/code><\/td>\n<\/tr>\n
    delegate<\/code> \u043d\u0430 focus<\/code><\/td>\nfocusin<\/code> \u0438\u043b\u0438 addEventListener(..., { capture: true })<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 list.contains(btn)<\/code> \u043d\u0443\u0436\u043d\u0430, \u0435\u0441\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043b\u043e\u0436\u0435\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c remove<\/code>: closest()<\/code> \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n
    \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n