{"id":39565,"date":"2024-05-18T15:30:54","date_gmt":"2024-05-18T11:00:54","guid":{"rendered":"https:\/\/wpadmin.maktabkhooneh.org\/mag\/?p=39565"},"modified":"2026-04-26T11:05:56","modified_gmt":"2026-04-26T07:35:56","slug":"event-in-javascript","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/event-in-javascript\/","title":{"rendered":"Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8211; \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639"},"content":{"rendered":"\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0627\u062a\u0641\u0627\u0642\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631\u0648\u0646 \u0633\u06cc\u0633\u062a\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0627\u0633\u062a \u0631\u062e \u062f\u0627\u062f\u0647 \u0648 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u06a9\u062f \u0648\u0627\u06a9\u0646\u0634\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0648\u06cc \u06cc\u06a9\u06cc \u0627\u0632 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u06cc\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f\u060c \u0627\u062a\u0641\u0627\u0642\u06cc \u0631\u062e \u062f\u0627\u062f\u0647 \u0648 \u06cc\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631\u0628\u0627\u0631\u0647\u200c\u06cc Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0622\u0646 \u062f\u0631 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u062a\u0633\u062c\u0648 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f<\/h2>\n\n\n\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0648\u0627\u06a9\u0646\u0634\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u0646\u062f. \u06cc\u0639\u0646\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0642\u0648\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u0648\u0644\u06cc\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0645\u06a9\u0627\u0646\u06cc\u0632\u0645\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u062f\u0631 \u0622\u0646 \u0627\u0642\u062f\u0627\u0645\u06cc \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f (\u06cc\u0639\u0646\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062f\u0647\u0627). Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631\u0648\u0646 \u067e\u0646\u062c\u0631\u0647\u200c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0627\u06cc\u062f \u0622\u06cc\u062a\u0645\u06cc \u0628\u0647 \u062f\u0631\u0648\u0646 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0622\u06cc\u062a\u0645 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0639\u0646\u0635\u0631 \u062a\u06a9 \u06cc\u0627 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0633\u0646\u062f HTML \u062f\u0631 \u062a\u0628 \u062c\u0627\u0631\u06cc \u06cc\u0627 \u06a9\u0644 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0634\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--56206\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-learn cb-ud1ng69u\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\r\n<div class=\"zht-learn-card\">\r\n    <div class=\"zht-learn-title-section\">\r\n        <div class=\"zht-learn-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" \/>\r\n            <\/svg>\r\n        <\/div>\r\n        \r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0644\u06cc\u0646\u06a9 -->\r\n        <a href=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" class=\"zht-learn-card-title\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u062f\u06a9\u0645\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u06af button -->\r\n    <!-- \u0627\u0632 onclick \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0645\u062d\u0636 \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f -->\r\n    <button class=\"zht-learn-card-btn\" data-course-url=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" onclick=\"window.open(this.getAttribute('data-course-url'), '_blank');\">\r\n        \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n    <\/button>\r\n<\/div><\/div><\/div><\/div>\n\n\n<p>\u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u0646\u062f \u0639\u0628\u0627\u0631\u062a\u200c\u0627\u0646\u062f \u0627\u0632:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u06a9\u0627\u0631\u0628\u0631\u060c \u0639\u0646\u0635\u0631\u06cc \u062e\u0627\u0635 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647\u060c \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06cc\u0627 \u0627\u0634\u0627\u0631\u0647\u200c\u06af\u0631 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u0622\u0646 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u062f.<\/li>\n\n\n\n<li>\u0631\u0648\u06cc\u062f\u0627\u062f onclick \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f\u060c \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u06a9\u0627\u0631\u0628\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u06cc\u0627 \u0622\u0646 \u0631\u0627 \u0645\u06cc\u200c\u0628\u0646\u062f\u062f.<\/li>\n\n\n\n<li>\u0641\u0631\u0645\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0648\u06cc\u062f\u06cc\u0648 \u067e\u062e\u0634\u060c \u0645\u0648\u0642\u0641 \u06cc\u0627 \u062a\u0645\u0627\u0645 \u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u062e\u0637\u0627\u06cc\u06cc \u0631\u062e \u062f\u0647\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062a\u0639\u062f\u0627\u062f \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u06af\u0641\u062a \u062a\u0639\u062f\u0627\u062f \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f\u060c \u0632\u06cc\u0627\u062f \u0627\u0633\u062a.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"780\" height=\"470\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-2.png\" alt=\"Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f\" class=\"wp-image-39567\" title=\"\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-2.png 780w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-2-300x181.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-2-768x463.png.webp 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u200c\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u067e\u0627\u0633\u062e \u062f\u0647\u062f \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06af\u06cc\u0631\u0646\u062f\u0647 \u06cc\u0627 Event handler \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0644\u0648\u06a9 \u06a9\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f.<\/p>\n\n\n\n<p>\u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>Change color<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0622\u0646\u060c \u0631\u0646\u06af \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0628\u0647 \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"936\" height=\"290\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518112359.gif\" alt=\"\u0627\u06cc\u0648\u0646\u062a \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" class=\"wp-image-39601 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 936px; --smush-placeholder-aspect-ratio: 936\/290;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 addEventListener<\/h2>\n\n\n\n<p>\u0634\u06cc event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0645\u062a\u062f\u06cc \u062e\u0627\u0635 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u0645\u062a\u062f  \u0646\u0627\u0645 \u062f\u0627\u0631\u062f \u0648 \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0646\u06af\u0627\u0647\u06cc \u062f\u0642\u06cc\u0642\u200c\u062a\u0631 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0642\u0628\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0639\u0646\u0635\u0631 &lt;button&gt; \u062f\u0631 HTML\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u0622\u0646\u060c \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u0648\u0633\u0637 \u062a\u0627\u0628\u0639 ()addEventListener \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u0634\u062e\u0635 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u062f\u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0639\u0628\u0627\u0631\u062a\u200c\u0627\u0646\u062f \u0627\u0632:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>click: \u0627\u06cc\u0646 \u0631\u0634\u062a\u0647 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u06af\u0648\u0634 \u062f\u0647\u06cc\u0645. \u06af\u0641\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0645\u0627\u0646\u0646\u062f mouseover (\u06a9\u0647 \u0628\u0627 \u062d\u0631\u06a9\u062a \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u062f) \u0648 keydown (\u06a9\u0647 \u0628\u0627 \u0632\u062f\u0646 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u062f) \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f.<\/li>\n\n\n\n<li>\u062a\u0627\u0628\u0639 RGB: \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u0628\u0627\u0639\u062b \u062a\u0648\u0644\u06cc\u062f \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<\/ol>\n\n\n\n<p>\u0646\u0645\u0648\u0646\u0647 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0646\u0627\u0645\u200c\u06af\u0630\u0627\u0631\u06cc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">changeBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> changeBackground<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"189\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7ff842b4-ae24-4b78-9183-bb8ce94ceb3e-300x189.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"Var \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7ff842b4-ae24-4b78-9183-bb8ce94ceb3e-300x189.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7ff842b4-ae24-4b78-9183-bb8ce94ceb3e-768x485.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/7ff842b4-ae24-4b78-9183-bb8ce94ceb3e.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/189;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/var-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 Var \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0631 addEventListener<\/h3>\n\n\n\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0634\u06cc event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f click \u0627\u0631\u0632\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u060c \u0645\u0627\u0646\u0646\u062f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>focus \u0648 blur: \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0646\u0648\u0646\u06cc \u0634\u062f\u0646 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u06cc\u0639\u0646\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f Tab \u062f\u06a9\u0645\u0647 \u06a9\u0627\u0646\u0648\u0646\u06cc \u0634\u062f\u0647 \u0648 \u0628\u0627 \u0641\u0634\u0627\u0631 \u0645\u062c\u062f\u062f Tab \u0627\u0632 \u062d\u0627\u0644\u062a \u06a9\u0627\u0646\u0648\u0646\u06cc \u062e\u0627\u0631\u062c \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0641\u0631\u0645 \u0627\u0634\u062a\u0628\u0627\u0647 \u0627\u0633\u062a \u0648 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631\u0633\u062a \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f.<\/li>\n\n\n\n<li>Dblclick: \u0627\u06cc\u0646 \u0634\u06cc event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u0634\u0648\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u0628\u0631\u062e\u06cc \u0627\u0632 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627\u0646\u0646\u062f click \u0628\u0631\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0639\u0646\u0627\u0635\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u0646\u062f. \u0628\u0631\u062e\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0645\u0627\u0646\u0646\u062f play \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646\u200c\u0647\u0627\u06cc\u06cc \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631 &lt;video&gt; \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u0646\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"780\" height=\"470\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-7.png\" alt=\"\u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0631 addEventListener\" class=\"wp-image-39572 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-7.png 780w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-7-300x181.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-7-768x463.png.webp 768w\" data-sizes=\"(max-width: 780px) 100vw, 780px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 780px; --smush-placeholder-aspect-ratio: 780\/470;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0646\u062d\u0648\u0647\u200c\u06cc \u062d\u0630\u0641 \u06a9\u0631\u062f\u0646 \u06af\u0648\u0634 \u062f\u0647\u0646\u062f\u0647\u200c\u0647\u0627<\/h3>\n\n\n\n<p>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <a href=\"https:\/\/maktabkhooneh.org\/mag\/addeventlistener-in-js\/\">addEventListener \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a> \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u06cc\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u062f removeEventListener \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0645\u062b\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u06a9\u0631\u062f\u0646 changeBackground:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>btn<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> changeBackground<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f AbortSignal \u0628\u0647 ()addEventListener \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0627 \u0628\u0627 ()abort \u06a9\u0647 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644\u0631 \u0628\u0647 AbortSignal \u0645\u062a\u0639\u0644\u0642 \u0627\u0633\u062a \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f. \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 AbortSignal \u062d\u0630\u0641 \u06a9\u0631\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> controller <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AbortController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">signal<\/span><span class=\"token operator\">:<\/span> controller<span class=\"token punctuation\">.<\/span>signal <span class=\"token punctuation\">}<\/span> <span class=\"token comment\">\/\/ pass an AbortSignal to this handler<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<div class=\"code-example\">\n<pre class=\"brush: js notranslate\" data-signature=\"EiLH246uvjLm7yIWQFrqfBi1W\/HQ4Ee3Q6Mqe1Jxv+U=\"><code>controller<span class=\"token punctuation\">.<\/span><span class=\"token function\">abort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ removes any\/all event handlers associated with this controller<\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 ()controller.abort \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0646\u062a\u0631\u0644\u0631 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p>\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0633\u0627\u062f\u0647 \u0648 \u06a9\u0648\u0686\u06a9 \u0647\u0633\u062a\u0646\u062f\u060c \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0642\u062f\u06cc\u0645\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0634\u062f\u0647 \u0636\u0631\u0648\u0631\u06cc \u0646\u06cc\u0633\u062a. \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0628\u0632\u0631\u06af \u0648 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0647\u0633\u062a\u0646\u062f. \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"186\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/16b0336d-69ac-4e70-9e06-6c657562acbe-300x186.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u00a0Const \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0633\u062a\u061f\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/16b0336d-69ac-4e70-9e06-6c657562acbe-300x186.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/16b0336d-69ac-4e70-9e06-6c657562acbe-768x476.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/16b0336d-69ac-4e70-9e06-6c657562acbe.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/186;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/const-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">Const \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a: \u0646\u06af\u0647\u0628\u0627\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0634\u0645\u0627 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0641\u0632\u0648\u062f\u0646 \u0686\u0646\u062f\u06cc\u0646 \u06af\u0648\u0634 \u062f\u0647\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u06a9\u06cc<\/h3>\n\n\n\n<p>\u0628\u0627 \u0686\u0646\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc ()addEventListener \u0648 \u0627\u0631\u0627\u0626\u0647 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u06a9\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> functionA<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nmyElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> functionB<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0647\u0631 \u062f\u0648\u06cc \u0627\u06cc\u0646 \u062a\u0648\u0627\u0628\u0639 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u06a9\u0644\u06cc\u06a9 \u0634\u0648\u062f\u060c \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u06a9\u0627\u0646\u06cc\u0632\u0645\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u06af\u0648\u0634 \u062f\u0647\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f<\/h3>\n\n\n\n<p>\u062f\u0631 ()addEventListener \u06a9\u0647 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u062e\u0648\u0628\u06cc \u062f\u0627\u0631\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/reactjs-63_QsAvipB_1403-08-16-164734762\/30ad815996c7019e488903891aba7d2b.webp?expire=4893471932&#038;token=58cbda5c656fe3c1c2b21f90f54d1188&#038;md5=WMvaXGVv48HCsh-Q9U0RiA==\" \n            alt=\"\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React\" \n            title=\"\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-reactjs-mk401\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f5\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f4\u06f1\u06f9,\u06f3\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f3\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-reactjs-mk401\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u06af\u0641\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0648 \u0631\u0648\u0634 \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0639\u0628\u0627\u0631\u062a\u200c\u0627\u0646\u062f \u0627\u0632 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0634\u0631\u062d \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f:<\/h4>\n\n\n\n<p>\u0627\u06cc\u0646 Event object \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f \u0648 \u0627\u063a\u0644\u0628 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0646\u0627\u0645 \u0622\u0646\u0647\u0627 \u06a9\u0644\u0645\u0647 on \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0646\u0627\u0645 \u0631\u0648\u06cc\u062f\u0627\u062f \u0645\u06cc\u200c\u0622\u06cc\u062f. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f onclick \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9\u06cc \u0627\u0632 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a. \u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onclick<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635 \u062e\u0635\u0648\u0635\u06cc\u062a \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0647 \u062a\u0627\u0628\u0639 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u0628\u0627\u06cc\u062f \u0639\u0645\u0644 \u06a9\u0631\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">bgChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span>onclick <span class=\"token operator\">=<\/span> bgChange<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u06af\u0641\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0634\u0645\u0627 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u06cc\u0634 \u0627\u0632 \u06cc\u06a9 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u06a9\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>element<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> function1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nelement<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> function2<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u063a\u06cc\u0631\u0645\u0645\u06a9\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f\u060c \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0644\u062a \u0645\u0648\u0627\u0631\u062f \u0642\u0628\u0644\u06cc \u0628\u0627\u06cc\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u0634\u0648\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>element<span class=\"token punctuation\">.<\/span>onclick <span class=\"token operator\">=<\/span> function1<span class=\"token punctuation\">;<\/span>\nelement<span class=\"token punctuation\">.<\/span>onclick <span class=\"token operator\">=<\/span> function2<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0628\u0627\u0644\u0627 \u0635\u0641\u0627\u062a \u0648\u0627\u0642\u0639\u06cc \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0642\u0648\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u062c\u0631\u0627 \u0634\u0648\u062f. \u0634\u0645\u0627 \u0645\u0627\u0646\u0646\u062f \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631\u0648\u0646 \u0635\u0641\u062a \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button <span class=\"token special-attr\"><span class=\"token attr-name\">onclick<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token value javascript language-javascript\"><span class=\"token function\">bgChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Press me<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u0628\u0647 \u0627\u06cc\u0646 \u0646\u06a9\u062a\u0647 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0628\u0627\u06cc\u062f \u0627\u0632 \u0635\u0641\u0627\u062a HTML \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627\u06cc\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u0639\u0627\u062f\u0644\u200c\u0647\u0627\u06cc \u0622\u0646\u0647\u0627 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0635\u0641\u0627\u062a \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u062a\u0627 \u0633\u0631\u0639\u062a \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0634\u0645\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u0646\u062f.<\/p>\n\n\n\n<p>\u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631\u0648\u0646 \u062e\u0637\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0627\u0645\u0646\u06cc\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u062e\u0648\u0628 \u062f\u0627\u0631\u0646\u062f\u060c \u0627\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u06a9\u062a\u0647 \u0628\u0627\u06cc\u062f \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0635\u0641\u0627\u062a \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f HTML \u0628\u0647 \u0639\u0644\u062a \u0645\u0646\u0633\u0648\u062e \u0634\u062f\u0646 \u0646\u0628\u0627\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> buttons <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> button <span class=\"token keyword\">of<\/span> buttons<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  button<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> bgChange<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0634\u06cc\u0627\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f<\/h2>\n\n\n\n<p>\u0628\u0631\u062e\u06cc \u0627\u0648\u0642\u0627\u062a \u062a\u0627\u0628\u0639 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0627\u06cc \u0628\u0627 \u0646\u0627\u0645\u06cc \u0645\u0627\u0646\u0646\u062f Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0634\u06cc event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0634\u06cc\u200c\u0647\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0648 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u0646\u062f. \u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>number <span class=\"token operator\">+<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">bgChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  e<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> bgChange<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 e \u0634\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a \u0648 \u062f\u0631 \u062a\u0627\u0628\u0639 \u0633\u0628\u06a9 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0631\u0648\u06cc e.target \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062e\u0635\u0648\u0635\u06cc\u062a\u06cc \u06a9\u0647 \u0634\u06cc event.target \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062a\u0635\u0627\u062f\u0641\u06cc \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"780\" height=\"470\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-20.png\" alt=\"\u0627\u0634\u06cc\u0627\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f\" class=\"wp-image-39585 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-20.png 780w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-20-300x181.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-20-768x463.png.webp 768w\" data-sizes=\"(max-width: 780px) 100vw, 780px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 780px; --smush-placeholder-aspect-ratio: 780\/470;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f<\/h2>\n\n\n\n<p>\u0628\u06cc\u0634\u062a\u0631 Event target\u0647\u0627 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0632 \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0645\u062a\u062f\u0647\u0627\u06cc \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0631\u0648\u06cc \u0634\u06cc\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f \u0647\u0633\u062a\u0646\u062f. \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f \u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0646\u0648\u0639 \u062e\u0627\u0635\u06cc \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0631\u0648\u06cc\u062f\u0627\u062f keydown \u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0644\u06cc\u062f \u06cc\u0627 \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0641\u0634\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u06cc\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f \u0622\u0646 \u06cc\u06a9 KeyboardEvent \u0627\u0633\u062a\u060c\u06a9\u0647 \u0634\u06cc\u0621 Event \u062a\u062e\u0635\u0635\u06cc \u0628\u0627 \u06cc\u06a9 \u062e\u0635\u0648\u0635\u06cc\u062a key \u0628\u0648\u062f\u0647 \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u06a9\u062f\u0627\u0645 \u06a9\u0644\u06cc\u062f \u0641\u0634\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>textBox<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>output<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> textBox <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#textBox\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\ntextBox<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"keydown\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">You pressed \"<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>event<span class=\"token punctuation\">.<\/span>key<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\".<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"950\" height=\"182\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518113245.gif\" alt=\"\u062e\u0635\u0648\u0635\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0631\u0648\u06cc\u062f\u0627\u062f\" class=\"wp-image-39602 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/182;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636<\/h2>\n\n\n\n<p>\u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0648\u0627\u0642\u0639 \u0645\u0648\u0642\u0639\u06cc\u062a\u06cc \u0628\u0647\u200c\u0648\u062c\u0648\u062f \u0645\u06cc\u200c\u0622\u06cc\u062f \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u06af\u0641\u062a \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0641\u0631\u0645\u06cc \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u067e\u0631 \u06a9\u0631\u062f\u0647 \u0648 \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u0627 \u067e\u06cc\u063a\u0627\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062b\u0628\u062a \u0634\u062f\u060c \u0631\u0648\u0628\u0647\u200c\u0631\u0648 \u0634\u0648\u0646\u062f. \u0627\u0645\u0627\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u06af\u0627\u0646 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0646\u0627\u062f\u0631\u0633\u062a \u0648 \u062b\u0628\u062a \u0622\u0646\u0647\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0644\u062a \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0646\u0627\u062f\u0631\u0633\u062a \u0627\u0633\u062a \u0628\u0627 \u0632\u062f\u0646 \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 \u0628\u0627\u06cc\u062f \u067e\u06cc\u063a\u0627\u0645 \u062e\u0637\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f \u0648 \u0628\u0647 \u0627\u0648\u0646 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f \u06a9\u0647 \u0686\u0647 \u0641\u06cc\u0644\u062f\u06cc \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0634\u062a\u0628\u0627\u0647 \u0627\u0633\u062a.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u0645\u062b\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0646 \u0641\u0631\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>fname<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>First name: <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>fname<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lname<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Last name: <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lname<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>form<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u062d\u0627\u0644\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f \u06a9\u0647 \u0641\u06cc\u0644\u062f\u06cc \u062e\u0627\u0644\u06cc \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u062a\u0627\u0628\u0639 ()preventDefault \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u062a\u0627 \u0627\u06af\u0631 \u0641\u06cc\u0644\u062f\u06cc \u062e\u0627\u0644\u06cc \u0628\u0648\u062f \u067e\u06cc\u063a\u0627\u0645 \u062f\u0631\u0633\u062a\u06cc \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> form <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"form\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> fname <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"fname\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> lname <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"lname\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> para <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"p\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\nform<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"submit\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>fname<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">===<\/span> <span class=\"token string\">\"\"<\/span> <span class=\"token operator\">||<\/span> lname<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">===<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    e<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    para<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">\"You need to fill in both names!\"<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0647\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"950\" height=\"238\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518113350.gif\" alt=\"\u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\" class=\"wp-image-39603 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/238;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0646\u062a\u0634\u0627\u0631 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f (Event bubbling)<\/h2>\n\n\n\n<p>Event bubbling\u060c \u062a\u0648\u0635\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f. \u0645\u062b\u0627\u0644 \u062a\u0646\u0638\u06cc\u0645 \u06af\u0648\u0634\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>Click me!<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>pre <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>output<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>pre<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0639\u0646\u0635\u0631 &lt;div&gt; \u062f\u0631 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 \u062f\u06cc\u06af\u0631\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0627\u0635\u0637\u0644\u0627\u062d \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u0646\u0627\u0645 \u062f\u0627\u0631\u062f. \u0627\u06af\u0631 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u0648\u0627\u0644\u062f \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u0645\u060c Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627\u0646\u0646\u062f \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">+=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">You clicked on a <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>e<span class=\"token punctuation\">.<\/span>currentTarget<span class=\"token punctuation\">.<\/span>tagName<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> elementn<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> container <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#container\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\ncontainer<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0647\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"950\" height=\"210\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518113547.gif\" alt=\"\u0627\u0646\u062a\u0634\u0627\u0631 \u062d\u0628\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f (Event bubbling)\" class=\"wp-image-39604 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/210;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u0645\u062b\u0627\u0644\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u062d\u0628\u0627\u0628:<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"217\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32e3f8aa-6535-4c92-83de-65fa39e6da30-300x217.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0645\u0642\u0627\u06cc\u0633\u0647 \u062f\u0648 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32e3f8aa-6535-4c92-83de-65fa39e6da30-300x217.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32e3f8aa-6535-4c92-83de-65fa39e6da30-768x556.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/32e3f8aa-6535-4c92-83de-65fa39e6da30.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/217;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/comparing-two-arrays-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0645\u0642\u0627\u06cc\u0633\u0647 \u062f\u0648 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a: \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639<\/a>\n<\/section><\/div>\n\n\n<p>\u0627\u0636\u0627\u0641\u0647 \u06af\u0648\u0634\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0648\u0627\u0644\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>Click me!<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>pre <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>output<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>pre<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0648\u0627\u0644\u062f (&lt;div&gt;) \u0648 \u0639\u0646\u0635\u0631 &lt;body&gt; \u0628\u0647 \u06af\u06cc\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0627\u06cc\u062f \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">+=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">You clicked on a <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>e<span class=\"token punctuation\">.<\/span>currentTarget<span class=\"token punctuation\">.<\/span>tagName<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> elementn<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> container <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#container\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> button <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\ndocument<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\ncontainer<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nbutton<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0647\u0645 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"950\" height=\"284\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518113729.gif\" alt=\"const output = document.querySelector(&quot;#output&quot;); function handleClick(e) { output.textContent += `You clicked on a ${e.currentTarget.tagName} elementn`; } const container = document.querySelector(&quot;#container&quot;); const button = document.querySelector(&quot;button&quot;); document.body.addEventListener(&quot;click&quot;, handleClick); container.addEventListener(&quot;click&quot;, handleClick); button.addEventListener(&quot;click&quot;, handleClick);\" class=\"wp-image-39605 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/284;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0647\u0631 \u0633\u0647 \u0639\u0646\u0635\u0631 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0641\u0631\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u0639\u0646\u06cc:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u0648\u0644 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0628\u0647\u200c\u062f\u0646\u0628\u0627\u0644 \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0648\u0627\u0644\u062f \u06cc\u0639\u0646\u06cc \u0639\u0646\u0635\u0631 &lt;div&gt; \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0633\u067e\u0633 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f &lt;div&gt; \u06a9\u0647 &lt;body&gt; \u0627\u0633\u062a \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u0627\u06cc\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u0632 \u062f\u0631\u0648\u0646\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631 \u06a9\u0644\u06cc\u06a9 \u0634\u062f\u0647 \u0628\u0631\u0633\u062f. \u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631 \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0641\u06cc\u062f \u0628\u0627\u06cc\u062f \u0648 \u062f\u0631 \u0628\u0639\u0636\u06cc \u0645\u0648\u0627\u0642\u0639 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0634\u06a9\u0644\u200c\u0633\u0627\u0632 \u0634\u0648\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"780\" height=\"470\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-28.jpeg\" alt=\"Event bubbling\" class=\"wp-image-39593 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39565-28.jpeg 780w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-28-300x181.jpeg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39565-28-768x463.jpeg.webp 768w\" data-sizes=\"(max-width: 780px) 100vw, 780px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 780px; --smush-placeholder-aspect-ratio: 780\/470;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0631\u0641\u0639 \u0645\u0634\u06a9\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 stopPropagation<\/h2>\n\n\n\n<p>\u062f\u0631 \u0628\u062e\u0634 \u0642\u0628\u0644 \u06af\u0641\u062a\u06cc\u0645 \u06a9\u0647 Event bubbling \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0634\u06a9\u0644\u0627\u062a\u06cc \u0628\u0647\u200c\u0648\u062c\u0648\u062f \u0622\u0648\u0631\u062f. Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0627\u0628\u0639\u06cc \u0628\u0647 \u0646\u0627\u0645 ()stopPropagation \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0628\u0647\u200c\u0648\u062c\u0648\u062f \u0622\u0645\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u0627\u062a \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f. \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u062e\u0644 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f\u0647 \u0648 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u0633\u0627\u06cc\u0631 \u0639\u0646\u0627\u0635\u0631 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p>\u0645\u0634\u06a9\u0644 Event bubbling \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f \u0632\u06cc\u0631 \u0628\u0631\u0637\u0631\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> box <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"div\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> video <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"video\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> box<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">remove<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"hidden\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\nvideo<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">stopPropagation<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  video<span class=\"token punctuation\">.<\/span><span class=\"token function\">play<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\nbox<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> box<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"hidden\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0633\u062a\u0631\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f (Event Capture) \u0628\u0627 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h2>\n\n\n\n<p>\u0634\u06a9\u0644 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0627\u0646\u062a\u0634\u0627\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u06af\u0633\u062a\u0631\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a. Event Capture \u0645\u0627\u0646\u0646\u062f \u0627\u0646\u062a\u0634\u0627\u0631 \u062d\u0628\u0627\u0628 \u0628\u0648\u062f\u0647 \u0627\u0645\u0627 \u0628\u0627 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0639\u06a9\u0633. \u06cc\u0639\u0646\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647\u200c\u062c\u0627\u06cc \u0627\u06cc\u0646\u200c\u06a9\u0647 \u062f\u0631 \u062f\u0631\u0648\u0646\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u0628\u06cc\u0631\u0648\u0646\u06cc\u200c\u062a\u0631\u06cc\u0645 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0645\u062a\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0628\u0648\u062f\u0647 \u0648 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0646 \u0628\u0627\u06cc\u062f \u062f\u0631 ()addEventListener \u06af\u0632\u06cc\u0646\u0647\u200c\u06cc capture \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u062f. \u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>Click me!<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>pre <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>output<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>pre<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">handleClick<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">+=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">You clicked on a <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>e<span class=\"token punctuation\">.<\/span>currentTarget<span class=\"token punctuation\">.<\/span>tagName<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> elementn<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> container <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#container\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> button <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"button\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\ndocument<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">capture<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\ncontainer<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">capture<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nbutton<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> handleClick<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"950\" height=\"288\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518114029.gif\" alt=\"\" class=\"wp-image-39606 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/288;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u062a\u0631\u062a\u06cc\u0628 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0628\u0631\u0639\u06a9\u0633 \u0627\u0633\u062a. \u06cc\u0639\u0646\u06cc \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f &lt;body&gt; \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0633\u067e\u0633 \u0631\u0648\u06cc\u062f\u0627\u062f &lt;div&gt; \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f &lt;button&gt;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0646\u062a\u0642\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f Event delegation<\/h2>\n\n\n\n<p>\u06af\u0633\u062a\u0631\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc Event delegation \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0632\u06cc\u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u06a9\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u0631\u0648\u062e \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u06a9\u0646\u06cc\u0645. \u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>tile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token selector\">.tile<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 25%<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">float<\/span><span class=\"token punctuation\">:<\/span> left<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n\n\n\n<p>\u062d\u0627\u0644\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0645\u062f\u06cc\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u062e\u0634 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f. \u0627\u0645\u0627 \u06af\u0632\u06cc\u0646\u0647 \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0633\u0627\u062f\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062f\u06cc\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u062a\u0627 \u0627\u0632 \u06af\u0633\u062a\u0631\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631 \u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0628\u062e\u0634\u06cc \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645. \u0645\u0627\u0646\u0646\u062f \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token keyword\">function<\/span> <span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> number<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">bgChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> rndCol <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">rgb(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span> <span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2\u06f5\u06f5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> rndCol<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> container <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#container\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\ncontainer<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>backgroundColor <span class=\"token operator\">=<\/span> <span class=\"token function\">bgChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"948\" height=\"622\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240518114242.gif\" alt=\"\u0627\u0646\u062a\u0642\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f Event delegation\" class=\"wp-image-39607 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 948px; --smush-placeholder-aspect-ratio: 948\/622;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0641\u0648\u0642 \u0627\u0632 event.target \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0647\u062f\u0641 \u0622\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0648\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0648 Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0648\u0628<\/h2>\n\n\n\n<p>\u0645\u0647\u0645 \u0627\u0633\u062a \u0628\u062f\u0627\u0646\u06cc\u0645 \u06a9\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0635\u0631\u0641\u0627\u064b \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0646\u06cc\u0633\u062a\u0646\u062f. \u0627\u06a9\u062b\u0631 \u0632\u0628\u0627\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u200c\u0646\u0648\u06cc\u0633\u06cc \u062f\u0627\u0631\u0627\u06cc \u0645\u062f\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u06af\u0631\u0686\u0647 \u0646\u062d\u0648\u0647\u200c\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0627\u0634\u062f. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c Node.js \u06a9\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0627\u062c\u0631\u0627\u06cc\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0633\u06cc\u0627\u0631 \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0648 \u0633\u0631\u0648\u0631 \u0627\u0633\u062a\u060c \u0627\u0632 \u0645\u062f\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u06af\u0648\u0634\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0647\u0627 (listeners) \u0648 \u0641\u0631\u0633\u062a\u0646\u062f\u0647\u200c\u0647\u0627 (emitters) \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a.<\/p>\n\n\n<div class=\"jet-listing-grid--56206\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-learn cb-ud1ng69u\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\r\n<div class=\"zht-learn-card\">\r\n    <div class=\"zht-learn-title-section\">\r\n        <div class=\"zht-learn-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" \/>\r\n            <\/svg>\r\n        <\/div>\r\n        \r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0644\u06cc\u0646\u06a9 -->\r\n        <a href=\"https:\/\/maktabkhooneh.org\/learn\/web-design\/\" class=\"zht-learn-card-title\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u062f\u06a9\u0645\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u06af button -->\r\n    <!-- \u0627\u0632 onclick \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0645\u062d\u0636 \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f -->\r\n    <button class=\"zht-learn-card-btn\" data-course-url=\"https:\/\/maktabkhooneh.org\/learn\/web-design\/\" onclick=\"window.open(this.getAttribute('data-course-url'), '_blank');\">\r\n        \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n    <\/button>\r\n<\/div><\/div><\/div><\/div>\n\n\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u06cc\u0627\u0646\u200c\u0645\u0631\u0648\u0631\u06af\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc WebExtensions \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062f\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0648\u0632\u0647 \u0646\u06cc\u0632 \u0634\u0628\u0627\u0647\u062a\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0648\u0628 \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u062a\u0641\u0627\u0648\u062a\u200c\u0647\u0627\u06cc\u06cc \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0633\u062e\u0646 \u067e\u0627\u06cc\u0627\u0646\u06cc<\/h2>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0628\u0627\u0646\u06cc Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0648\u0628 \u0631\u0627 \u0641\u0631\u0627 \u06af\u0631\u0641\u062a\u06cc\u062f. \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0628\u062e\u0634 \u062c\u062f\u0627\u06cc\u06cc\u200c\u0646\u0627\u067e\u0630\u06cc\u0631\u06cc \u0627\u0632 Web API\u200c\u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0633\u062a\u0646\u062f \u0648 \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u0641\u0627 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u062f\u0631\u06a9 \u0635\u062d\u06cc\u062d \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u0645\u0627\u0646\u0646\u062f \u062b\u0628\u062a \u06af\u0648\u0634\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u0627\u0646\u062a\u0634\u0627\u0631 \u062d\u0628\u0627\u0628\u060c \u0627\u0646\u062a\u0642\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062a\u062d\u062a \u0648\u0628 \u06a9\u0645\u06a9 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.<\/p>\n\n\n\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0647\u0645 \u0627\u0633\u062a \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u062f\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u062f\u0631 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0646\u0627\u0645\u0647\u200c \u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 Node.js \u0648 WebExtensions \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0648\u0628 \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0627\u0634\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0631\u06a9 \u0645\u0628\u0627\u0646\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0648\u0628\u060c \u06af\u0627\u0645 \u0645\u0647\u0645\u06cc \u062f\u0631 \u0645\u0633\u06cc\u0631 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"181\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39468-1-300x181.jpeg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"Map \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39468-1-300x181.jpeg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39468-1-768x463.jpeg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39468-1.jpeg 780w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/181;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/map-in-js\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">Map \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8211; \u0622\u0645\u0648\u0632\u0634 \u0645\u067e \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0627\u062f\u0647 \u0648 \u06a9\u0627\u0645\u0644<\/a>\n<\/section><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0627\u062a\u0641\u0627\u0642\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631\u0648\u0646 \u0633\u06cc\u0633\u062a\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0627\u0633\u062a \u0631\u062e \u062f\u0627\u062f\u0647 \u0648 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u06a9\u062f \u0648\u0627\u06a9\u0646\u0634\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0648\u06cc \u06cc\u06a9\u06cc \u0627\u0632 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u06cc\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f\u060c \u0627\u062a\u0641\u0627\u0642\u06cc \u0631\u062e \u062f\u0627\u062f\u0647 \u0648 \u06cc\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631\u0628\u0627\u0631\u0647\u200c\u06cc Event \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":39608,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,30,12],"tags":[],"class_list":["post-39565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training","category-web-programming-articles","category-java-script-articles"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=39565"}],"version-history":[{"count":5,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39565\/revisions"}],"predecessor-version":[{"id":68359,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39565\/revisions\/68359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/39608"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=39565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=39565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=39565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}