Up next in 10
Events, Event Bubbling, setInterval & setTimeout _ Sigma Web Development Course - Tutorial #74
15 views
Mar 11, 2024
In Tutorial #74 of the Sigma Web Development Course, participants explore the intricate world of events, event bubbling, setInterval, and setTimeout in JavaScript. This tutorial provides a comprehensive guide on how to handle and respond to events in the Document Object Model (DOM), allowing viewers to understand the flow of events and implement timed actions using setInterval and setTimeout functions. From event propagation to creating dynamic and responsive web applications, participants will gain practical insights into enhancing user interactions. Whether you're a beginner or looking to refine your JavaScript skills, this tutorial serves as a crucial step toward mastering event handling and incorporating time-based functions into your web development projects. Join the course to elevate your understanding of JavaScript and unlock new possibilities for crafting interactive and engaging web experiences.
View Video Transcript
0:00
कि आज के इस वीडियो में मैं आप लोगों को जावास्क्रिप्ट के इवेंट्स के बारे में बताऊंगा जावास्क्रिप्�
0:04
के अंदर बहुत सारे इवेंट्स होते हैं जैसे कि आप लोग माउस को किसी भी एक एलिमेंट के अंदर लेकर जान�
0:09
जाएंगे या फिर आप माउस को वहां से बाहर निकालेंगे किसी भी एक एलिमेंट पर आप लोग क्लिक कर सकते है�
0:13
डॉल क्लिक कर सकते हैं इन सब इवेंट्स के बारे में हम लोग देखेंगे इस वीडियो में इस वीडियो को लाइक करक�
0:18
पीछे कमेंट सेक्शन में जावास्क्रिप्ट टोपी लिख देना अगर आप लोगों को जावास्क्रिप्ट में बजा आ रहा है तो चलता है कंप्यूटर स्क्रीन में लेट्स रोल देंट्र�
0:25
अब गैस मैं आ चुका हूं अपनी कंप्यूटर स्क्रीन में वीडियो 74 यहां पर बनाऊंगा और आज बात करने वाल�
0:39
इवेंट्स की और क्यों इवेंट्स बहुत ज्यादा इंपोर्टेंट है और क्यों आप लोग उसको इतना ज्यादा इस्तेमाल करन�
0:44
एक index.html बनाकर boilerplate डालकर script colon src लगकर थोड़ा सा time waste करूँग�
0:52
और script.js बनाकर मैं आप लोगों को बस यह बताऊँगा कि कुछ हमारे पास events होते है�
0:59
जिनकी ज़रूरत हमें पड़ती है मैंने notes में इसी चीज़े बहुत clearly बताई हुई ह�
1:03
कि browser event एक signal होता है कि कुछ हुआ है आप custom events भी बना सकते है�
1:08
लेकिन ऐसे बहुत सारे events होते हैं जो javascript में आप लोगों को built in देखने को मिलते है�
1:12
events के लिए आप लोग listen कर सकते हैं और events अलग अलग तरह के होते है�
1:16
जिनको आप लोग officially mdn से देख सकते हैं मैं बहुत तेज स्टार्ट लूँगा यहाँ पर
1:21
मैं यहाँ पर बनाऊँगा एक बटन, ठीक है, एक तो बनाऊँगा container, div.container
1:26
और container के अंदर एक box बनाऊँगा, hey, I am a box बनाऊँगा
1:31
मैं यहाँ पर लिखूँगा, फिर इसके बाद मैं एक बटन लिखूंगा और यहाँ पर मैं लिख दूँग�
1:36
click me to change content या फिर सिर्फ change content लिखता हूँ ठीक ह�
1:40
change content और यहाँ पर मैं इस बटन को एक ID दे दूँग�
1:46
btn के नाम से अब मैं क्या कर सकता हूँ मैं यहाँ पर कह सकता हू�
1:49
लेट बीटी एन इस एकल टू डॉक्यूमेंट डॉट गेट एलिमेंट्स बाय आईडी और मैं कहूंगा बीटी एन क�
1:56
बीटी एन वाली आईडी का बटन ले लो और मैं इसका नाम कुछ भी रख सकता हूँ बटन भी रख सकता हूँ बीट�
2:01
बिजन भी रख सकता हूं वह मेरी मर्जी होने वाली है ठीक है और मैं कह सकता हूं बटन डॉट एडिवेंट लिसनर औ�
2:07
पहला अर्ग्यूमेंट इसका होता है कि कौन सा इवेंट के लिए आप लिसन करना चाहते हो और दूसरा अर्ग्यूमेंट होत�
2:13
function जो की run करेगा एक बार आपने event के लिए listen किया तो अगर आप लोगों ये चीज overwhelming लग गई थोड़ी सी भ�
2:18
तो समझा देता हूँ कि एक function है पहले element मैंने यहाँ पर ले लिया क�
2:22
मैं जो बटन चीज़ें अब मैं कहना हूँ उस बटन पर जब क्लिक किया जाए तो यहाँ प�
2:27
इस event का नाम मैंने लिखा है click यह event कुछ और भी हो सकता था double click भी हो सकता थ�
2:30
यह event mouse over भी हो सकता था यानि कि मैं mouse को ले कर जाओं उस तक button त�
2:34
और इसके बाद मैं क्या करूँगा यहाँ पर मैं कहूँगा कि भाई इस पर जैस�
2:38
कोई क्लिक करें, आप क्या करो, कि इस content को change कर दो, तो मैं कहूँगा document
2:45
मैं कुछ भी कर सकता हूँ इसके click पर, मैं एक simple से alert लगा सकता हूँ, मैं एक alert लगाऊँगा, मैं कहूँगा I was clicked, ये, मालूँ मैंने ये लिख दिया इस तरह से
2:56
और इसको मैं जैसे ये भी run करूँगा और इसके बाद मैं इस पर click करूँग�
3:00
तो देखो I was clicked ये लिख कर आ गया इसका मतलब ये जो click वाला हमारा listener है वो काम कर रहा ह�
3:07
और अच्छी तरह से काम कर रहा है ठीक है ओल राइट अब मैं आप लोगों यह दिखाना चाहता हूँ क�
3:13
मैं चाहूँ तो कुछ भी कर सकता हूँ इसके बाद मैं कह सकता हूँ document.getElementByClassName
3:19
और मैं कहूँगा यहाँ फिर query selector यूज़ करता हूँ मैं जब भी मुझे एक element select करना होता ह�
3:26
और मैं यहाँ पर कहूँगा dot box क्योंकि यह इसमें class box लगी हो जाएगा तो यह वाला element select हो जाएग�
3:31
और मैं कहूँगा इसकी जो inner HTML ना उसको कर दो यह you were clicked
3:38
ठीक है enjoy your click ठीक है मैंने मान लो यह लिख�
3:46
तो क्या होगा जैसे ही मैं इस बटन पर क्लिक करूँगा इसका content जो है वो change हो जाएगा मैं आपको दिखाता हूँ मैंने क्लिक किया ये you are clicked enjoy और click करा गया ठीक है मैं reload करूँगा चीज़ें normal हो जाएगी मैं दुबारा से यहाँ change content पर क्लिक करूँगा आप देखो ये you are clicked enjoy औ�
4:16
और event का reference है वो मुझे क्या बताएगा कि कौन-कौन से events होते हैं ठीक ह�
4:21
अब यहाँ पर बहुत तरह की events mouse से related दिये हुए हैं अगर मैं सारे events देखना चाहता हूँ तो मैं यह mouse events जो है इनको खोल लूँगा कुछ इस तरह स�
4:28
और यहाँ पर मुझे पेज मिल गया और मैं इस पेज को क्या करूँगा ना कॉपी करके यहाँ पर पेस्ट करathers लोगों के लिए ताकि यहाँ आप लोगों को इसीली सारे इवेंट्स यहाँ मिल जाए ठीक है और मैं यहाँ पर कमेंट आउट कर दो और मैं यहाँ पर लिख द�
4:58
वो हो जाए तो आप search कर सकते हैं इंटरनेट पर कि क्या कोई ऐसा event होता है जिससे मैं double click को listen कर सकू�
5:04
अगर होता है तो आपको पता जाएगा हाँ भाई होता है ठीक है तो मैं एक काम करूँगा यहाँ पर index.html जो है यह मेर�
5:11
अल्ली रन हो रही है तो मैं अभी इस पर अगर click करूँगा ना देखो मैंने single click किया कुछ नहीं हु�
5:15
दोबारा single click किया कुछ नहीं किया कुछ नहीं हुआ double click किया मैंने तो यह देखो यह हो गया इसका मतल�
5:21
यह double click को listen कर रहा है मैं double click को listen कर सकता हूँ कभी मैं windows clone बनान�
5:41
जो आप लेकर गए ठीक है माउस डाउन मतलब अपने बटन को दबाया जैसे आप दबाओगे वैसे हो जाएगा माउस एंट�
5:53
माउस लीव होता है कि आप लेकर गए और आपने हटाया ठीक है माउस आउट क्या मतलब क्या हुआ कि जब आप माउस क�
5:59
of the element to which the listener is attached or of one of its children
6:04
इन्हीं उसके children से या उससे अगर आप भटाओगे तो ठीक है तो ये सारी events क�
6:08
रटने की जरूरत नहीं है to be honest क्या मुझे रटे हुआ है सब की किस से क्या होता है नही�
6:12
जूट नहीं बोलना चाहूँगा नहीं रटे हुआ है कि आपको रटने चाहिए नहीं रटने चाहिए काम करते करते जो है आ जाएगा trial and error करते करते चीजें आ जाएग�
6:21
कुछ चीजें मुझे definitely रटी हुई हैं जैसे कि context menu जिससे कि right click खुलता है ठीक है तो ये event तब खुलेग�
6:28
मतलब तब fire होगा जब आप right click करोगे ठीक है तो अगर मैं जाता हूँ कि जो context menu ह�
6:33
मैं यहाँ पर आप लोग को दिखाता हूँ मैं इसका एक औ�
6:38
copy बनाओंगा और मैं कहूँगा context menu जब खुले ना तब एक alert कर द�
6:44
और कह दो right click please यहां पर मैं लिख दूंगा don right click don hack us by right click please right click reload right click
7:06
राइटलिक करूंगा तो देखो डांट है अस बाय राइटलिक प्लीज ओके ठीक है तो मैं राइटलिक करूंगा देखो डां�
7:12
आप अस पाए राइटलिक प्लीज ओके तो क्या होगा राइटलिक करने पर यह लिस्ट कर रहा है ठीक है तो इस तरह के बहु�
7:18
इवेंट्स है जो कि आप यूज कर सकते हो कीबोर्ड के विंडिस होते हैं की डाउन की अप और कीबोर्ड के विंडिस अग�
7:24
आप लोगों को देखने हैं तो आप कीबोर्ड के विंडिस पर चले जाओ देखो बहुत सारी विंडिस जाओ इसके में सिर्�
7:29
events नहीं होते keyboard के events को अगर आप लोग देखना चाहते हो तो देखो key down key press ठीक ह�
7:35
fired when a key that produces a character values press down ठीक है key up ठीक है फिर ये mouse
7:43
events है keyboard events है ये सारी events आपको जो है enumerated है इस page पर ही तो आप जो है देख सकते हो इसको ठीक ह�
7:48
तो key down, key press, key up ये सब आप देख सकते हो ठीक ह�
7:53
तो मैं एक काम करता हूँ आप लोगों को एक key down बताता हूँ, key down करके दिखाता हू�
7:57
तो अगर मैं यहाँ पर कहूँ key down ठीक है तो क्या होता है कि ज�
8:03
एक मिनट इसको double click करता हूँ क्या होता है कि जो function होता है, जो second argument होता है, वो event object लेता है, इसे event object बोलते हैं, और मैं अगर इसको console lock करके दिखाओं आपको, तो आप लोगों को यहाँ पर जो event हुआ है, वो print होके दिखेगा, मैं inspect करता हूँ, और जैसे ही मैं कोई button दबाओंगा कीबोर्ड पर, मालो मैंने G �
8:34
के बाद मैं कोई भी की दबाऊंगा तो यह देखो यह काम कर रहा है ठीक है तो मैं रिलोड करूं और मैं इस पर क्लिक करू�
8:41
और उसके बाद कुछ दबाऊं तब यहां पर जो है यह मुझे दिखा रहा है यह सब ठीक है तो मुझे क्या करना पड़ेगा अगर मै�
8:47
जाता हूं कि हमेशा के लिए यह इवेंट काम करें तो डॉक्यूमेंट पर लगा दूंगा इसको तो जब भी मैं की प्रे�
8:52
करूंगा देखो मैं जो भी की प्रेस करो मैंने एच प्रेस किया मैंने एक ही आर किया आर किया वाइक किया तो यहा�
8:58
दिखा रहा है और यहां पर यह जो की है और यह की कोड है यहां पर मुझे दिखा रहा है तो मैं कह सकता हूं क�
9:03
इड़ोट की को प्रिंट करो यही डॉट की कोड को प्रिंट करो ठीक है तो मैं इड़ोट की कर सकता हूं इड़ोट क�
9:09
प्रेंट कर सकता हूं और आप लोग देखो कि मैं कुछ भी प्रेस कर रहा हूं यहां पर डॉक्यूमेंट में तो य�
9:14
की है यह की कोड है ठीक है तो की कोड से अभी कभी क्या होता है कि हम अगर एक की को ऐसा नंबर लेना होत�
9:19
तो हम ले सकते हैं जिसमाल मैं गेम मनाना चाहता हूं और मैं चाहता हूं कि मारियो यहां पर आए और जम करे�
9:25
जब मैं अपरो की दबाव ठीक है तो मैंने यहां पर अपरो की दबाई तो यह अरोअप जो है वह क्या है वह की है और इसक�
9:33
की कोड क्या है की कोड इसका यह था टिकट अब देखो इन की कोड ने यहाँ से कट गया और यह जो प्रॉपर्टी वह डेप्रिके�
9:39
हो गई है जिसका मतलब हम इसको इस्तेमाल नहीं करना है हमें की को ही इस्तेमाल करना है की कोड हमें इस्तेमा�
9:44
करना है तो मैं यह चेक कराऊंगा कि की कौन सी है arrow up अगर प्रेस किया औ�
9:48
intuitive भी हो जाता है code काफी देखने में तो आप यह सब चीज़े जो है use कर सकते ह�
9:52
और अब आप यहाँ पर देख सकते हो कि keyboard events document events यह सब चीज़े आप लो�
9:58
इस्तेमाल कर सकते हो फिर फॉर के कुछ इवेंट्स होते हैं जैसे कि जब फॉर्म सबमिट हो जाए तब क्या करना ह�
10:03
जब फॉर्म पर फोकस हो तब क्या करना किसी इनपुट पर फोकस हो तब क्या करना है तो यह सारी इवेंट्स भी आ�
10:08
जो है चेक आउट कर सकते हो तो मैं अगर यहां पर फॉर्म के इवेंट्स को सर्च करूं तो आप मुझे फॉर्म के विंडिय�
10:15
मिल जाएगा मैं फोकस सर्च करता हूं फोकस फोकस इन फोकस आउट तो कभी भी कोई एलिमेंट फोकस में आता है जैस�
10:23
input है तब आप लोगों को ये वाला जो event हो वो fire होता हुआ दिखेगा ठीक है अब जो मैं concept आप लोगों क�
10:28
सिखाने जा रहा हूँ वो बहुत important है और उसके लिए मैं एक पूरी file बनाऊँगा और उसका नाम है event bubbling
10:36
ठीक है, क्या है event bubbling, interview में बहुत पूछा जाता है, ध्यान से सुन लेना, ठीक है, तो मैं एक काम करूँगा, कि यहाँ पर event bubbling लिखूँगा, और मैं चाहता हूँ कि आप लोगों को दिखे कि मैं क्या कर रहा हूँ यहाँ पर, ताकि आप लोग जो है clearly देख पाओ इस चीज को, �
11:06
आपका रुगा डिव डॉट अब कंटेनर ठीक है और डिव डॉट चायल कंटेनर ठीक है ऑफिस के बाद लिखूंगा डिव डॉट औ�
11:18
इसको स्पैन कर देता हूं ठीक है स्पैन कर देता हूं और आपको बताऊंगा क्यों कर रहा हूं चीजें समझाने के लि�
11:22
यह मैंने स्पैन कर दिया, ठीक है, और इसके बाद इसके अंदर एक div डालूँगा, div.child, ठीक है, और मैं I am a child इसके अंदर लिखतूंगा, और बस इतना है, ठीक है, यह मैंने किया यहाँ पर, अब होगा क्या, आप समझ ले इस बात को, बहुत important concept है, बार बार बोल रहा हू�
11:52
मैं कहूँगा जब भी कोई child पर click करे तब क्या होना चाहि�
11:57
आप एक alert लगा दो कि child is clicked इस type से कुछ लगा दो ठीक ह�
12:03
तो कोई ज़्यादा बड़ी बात नहीं है मैं कहूँगा कि document.getElementBy या फिर query selector
12:12
और मैं कहूँगा .child .addEventListener code पूरा copy करूँगा जारा time waste नहीं करूँग�
12:21
सीधा ही copy करूँगा मैं और मैं कहूँगा कि बाई click जैसे ही हो इस प�
12:26
dot add event listener मैं directly single liner लिख रहा हूँ मुझे पता ह�
12:31
मैं कहूँगा जैसे ही click हो इस पर तब क्या करना ह�
12:34
कि मैं लिखूँगा child was clicked child was clicked ठीक है पर मैं डॉक्यूमेंट करता हूँ ताकि इस अच्छे से दिख�
12:42
तो child was clicked मैंने लिखा है यहाँ पर इसके बाद मैं क्या करूँग�
12:46
एक और event listener लगाऊँगा और मैं इस बार यह event listener लगाने वाला हू�
12:50
child container पर मैं कहूँगा child container पर लगा दो यह event listener
12:54
और मैं लिखूँगा child container was clicked same चीज मैं करने वाला हू�
12:59
किस पर container पर और मैं कहूँगा container was clicked ठीक है simple सी बात ह�
13:08
और मैं आपर click लगाओंगा यह जो context menu है वो नहीं लगाओंग�
13:13
click लगाओंगा तो पहला argument जो होता है वो click होता है add event listener क�
13:18
word wrap off करूं तो आप लोग को दिखेगा यहाँ पर कि मैंने क्या किया है कि एक event listener
13:22
लगाया है child पर एक लगाया है child container पर एक लगाया है container प�
13:26
अब देखो container के अंदर है child container और child container के अंदर ह�
13:30
child तो जब मैं child पर click करूँगा तब automatically ये event bubble हो जाएग�
13:36
इस बात का मतलब यह है कि जावास्क्रिप्ट यह कहती है कहती है भाई जब देखो आपने child को click किय�
13:41
अगर आप कह रहे हो कि आप UP में रहते हो तो आप इंडिया में automatically रहते ह�
13:47
एशिया में भी automatically रहते हो
14:01
और आपने technically container पे भी click किया, क्योंकि container तो पूरा है ना ये, ये पूरा है ना container, तो technically आपने container पे भी click किया, तो इसीलिए event bubble up हो जाता है, इसे कहते है event bubbling, यानि कि कुछ ऐसा प्रतीत होता है कि ये जो click वाला event था, वो इस पे तो लगा, लेकिन इस पे भी लग गया, फिर इस �
14:31
बाई जो डॉट चाइल्ड है उसका बैकग्राउंड कर दो आलिस ब्लू और मैं बॉर्डर टू पिक्सिल सॉलिड ब्लैक करके पैडिंग दे दूंगा था टी बॉर पिक्सिल मार्जिन दे दूंगा था टी बॉर पिक्सिल ठीक है और अभी मैं इसको अगर रन करूं पेज को �
15:01
पॉइंटर लगा देता हूँ ताकि आप लोग को दिखे कि चाइल कहां तक है कर्सर पॉइंटर ठीक है तो मैं अगर चाइल बहुत क्लिक करना हूँ तो चाइल बहुत क्लिक चलो समझ में आता है ओके चाइल कंटेनर बहुत क्लिक कंटेनर बहुत क्लिक सब क्लिक हुआ अगर �
15:31
यह margin padding इसमें भी लगा देता हूँ, और मैं same चीज करने वाला हूँ, container में भी, ठीक है, तो मैं कहूँगा कि भाई container में भी कर दो, और इस बार color हाँ मैं थोड़ा सा change करना चाहूँगा, कुछ और yellow कर देता हूँ color, ठीक है, और इसको 14, 14 कर देता हूँ, लगता है थोड़ी �
16:01
चाइल कंटेनर चाइल कंटेनर के अंदर कंटेनर है और मैंने एक स्पैन लगा दिया मैं काम करते हैं उसको डीवी क�
16:06
देता हूं यार इस पैन एक इन लाइन एलिमेंट होता है या फिर मैं इसको सेक्शन कर देता हूं तो थोड़ा सा और इज�
16:12
देखो यह चाइल्ड यह हमारा इसका पेरेंट यह है इसका पेरेंट तो मैं अगर यहां क्लिक करता हूँ आयम चाइल्ड पर आपने देखा तीनों इमेंट फायर हुए यहां क्लिक करता हूँ तो चाइल्ड कंटेनर वास क्लिक्ट और कंटेनर वास आल्सो क्लिक्ट लेकिन �
16:42
क्यों हो रहा है बबल, मुझे नहीं चाहिए bubbling, JavaScript कहता है, बाई, हम तो करेंगे by default bubbling
16:47
क्योंकि यार देखो, technically, चीजे बैटरी है बढ़िया, देखो बाई, आपने इस पे click किया
16:51
तो इस पे भी किया, और इस पे भी किया, आपको कहें, हाँ बई बराबर है लेकिन मुझे नहीं चाहिए या�
16:55
प्लीज माफ करो तो जावास्क्रिप्ट कहेगा भाई आपको नहीं चाहिए तो आप propagation क�
16:59
stop कर दो आप कोगे यार मतलब propagation को stop कर द�
17:03
इसका क्या मतलब हुआ मैं बता दो आपको क्या होता है मैंने आपको बताया था कि कोई भी event listener आप लोग अगर इस्तेमाल कर रहे हो
17:10
तो एक event object आप यहाँ पर ले सकते हो, और उस event के साथ जो की fire हुआ है
17:13
खिलवान कर सकते हो, तो आप कहो e.stop propagation, e.stop propagation, और यह method क्या करेगा
17:22
कि propagation को stop कर देगा, यानि कि bubbling नहीं होगी यह वाला जो behavior यह शो नहीं होग�
17:28
तो आप देखो कि जब मैं click करूँगा इस child पर तो सिर्फ child वाला ह�
17:34
यहाँ पर दिखाएगा एक बार को इसको comment out करता हूँ मैं मैंने सिर्फ child पर stop किया propagation
17:38
child पर click करूँगा तो child was clicked आया, बस, यही पर रुख गय�
17:42
propagation, event propagate नहीं हुआ, ऐसा नहीं हुआ, child पर लगा, उसके parent पर भी fire कर दिया
17:48
event उसके भी parent पर fire कर दिया, उसके papa पर भी fire कर दिया, नहीं
17:53
ऐसा नहीं हुआ, सिर्फ child पर ही लगा, क्योंकि मैंने stop कर दिया propagation, मैंन�
17:58
बाई चाइल्ड पर आप event को handle करो, बस बराबर है, इसके बाद इससे आगे propagation मुझे चाहिए ही नहीं
18:05
ठीक है, बढ़िया, तो यह है, I am a child, यहाँ पर आ गया
18:11
ठीक है, बढ़िया, बहुत ही बढ़िया, लेकिन मैं इसके बाहर click करूँगा, तो child container was clicked, हाँ भाई मैंने किया click
18:17
container was also clicked, कोई बात नहीं तो मैं यहाँ पर भी stop कर दूँगा propagation
18:21
तो यह वाले event से उपर वाले जितने भी elements हैं उन पर event fire नहीं होग�
18:27
इससे कहते हैं कि event bubbling को stop करना, तो सवाल पूछा जाता ह�
18:31
interviews में, event bubbling किया होता है, अब कहोगे आप किसी भ�
18:35
एक element पर कोई event listen करोगे तो उसका listener तो activate होगा ही होगा, लेकिन उसक�
18:41
parent का भी activate हो जाएगा, क्योंकि आप किसी element पर click कर रहे हो, त�
18:45
technically आप उसके parent पर भी click कर रहे हो अगर आप अपने room number
18:49
अपने घर के room number 4 में dance कर रहे हो तो आप अपने घर में भी dance कर रहे हो आप अपनी city में भी dance कर रहे हो और आप जो ह�
18:57
अपने state में भी dance कर रहे हो इस देश में भी dance कर रहे हो इस दुनिया में भी dance कर रहे ह�
19:01
solar system में भी dance कर रहे हो तो technically आप क्या है आपका यह event propagate हो गया को�
19:06
पूछेगा ओपर से कोई देखे आपको अगर कोई एलियन वगैरह तो वो कहेगा यह धरती पर नाच रहा है वो यह नहीं कहेगा यह रूम नंबर फोर में नाच रहा है वो कहेगा धरती पर नाच रहा है यह ठीक है तो इसे कहते हैं कि अ इवेंट मबलिंग ठीक है और आप �
19:36
I hope कि आपको समझ में आ गया, और I hope कि मज़ा आया आप लोगों को
19:41
इस concept को समझ कर, notes में मैंने सब कुछ बहुत अच्छी तरह से लिखा हुआ है
19:45
जिस तरह से हम add करते हैं event listener को, हम remove भी कर सकते हैं event listener को
19:50
जैसे कि add event listener is used to assign multiple handler to an event, उसी के साथ साथ
19:55
जो remove event listener है, आप, वोई function देके, same function object देके
20:02
आप remove भी कर सकते हो event listener को, ठीक है, तो आप एक variable बना सकते हो
20:06
आप कह सकते हो, const handle is equal to एक arrow function, और handler देके
20:11
आप add कर सकते हो event listener, और अगर आप remove करना चाहते हो
20:15
तो आप same variable यूज़ करके, उसको remove भी कर सकते हैं, तो वो event listener remove हो जाएगा, event object के बारे में मैंने आपको already बता दिया है, event.type होता है, event.current target होता है, event.clientX, clientY होता है, ठीक है कि आपके coordinate के cursor, mouse event के case में, तो आप ये सारे event की जो properties हैं, by the way आप एक काम क्यों ना करो, कि मैंने कोई भी key दबाई, तो यहाँ प�
20:47
event print event
21:17
तो control की और all की आप देख सकते हो, press, die की नहीं है, ठीक है, तो यह सब चीज़ें आप लोग कर सकते हो
21:23
बहुत ही simple and straightforward चीज़ें है, और मैंने notes में इसको और भी खुशूरती के साथ जो है लिखी हुई है
21:28
इसमें practice sets भी हैं, जो कि आप solve कर सकते हो, लेकिन मैंने यहाँ पर pretty much सब कुछ जो है cover कर दिय�
21:33
अब आप HTML attribute के थुरू भी events को handle कर सकते हुए जैसे आप onclick is equal to यह लिखक�
21:38
इस तरह से जो है एक javascript function को run कर सकते ह�
21:42
ठीक है या फिर आप इस तरह से भी कर सकते हो कि element.onclick is equal to यह function invoke हो जा�
21:47
तो ये notes में आपने देखा और इसको आप लोग करना भ�
21:50
लेकिन traditional method यही है mostly used method यही है कि आप लोग क्या करोग�
21:56
एक element.addEventListener का इस्तिमाल करोगे event का राम लिखोगे और function डाल दोग�
22:01
कि भाई ये वाला function को run कर दो अगर ये वाला जो event है वो fire हो त�
22:07
ठीक है, बढ़िया so, यहाँ पर हमने यह सब चीजों के बारे में बात कर लिया, अब एक चीज रह गई ह�
22:13
जिसको मैं आपको बताना चाहूँगा, वो है set timeout और set interval, उसक�
22:17
मैं इसी वीडियो में cover करना चाहूँगा, मैं नहीं चाहता कि मैं और वीडियो बनाओ इसको लेकर
22:21
यह बहुत straightforward चीज़ है, अगर मैं चाहता हूँ कि कोई एक चीज़ होती रहे
22:26
ठीक है, बार-बार होती रहे, तो मैं क्या करूँगा, मैं इसी पेज में करता हूँ
22:30
मालों मैं चाहता हूँ कि एक चीज रिपेटिटिवली होती रहे हर दो सेकें�
22:35
तो मैं सेट इंटरवल का प्रियोग कर सकता हूँ सेट इंटरवल एक फंक्षन होता ह�
22:39
जो एक फंक्षन लेता है एक फंक्षन होता है जो एक फंक्षन लेता है और टाइम लेता ह�
23:00
लो कि चाइल कंटेनर के कलर को चेंज कर दो ठीक है चाइल कंटेनर की डॉट स्टाइल ट्रॉप बैकग्राउंड इ�
23:09
इक्वल टू आप कर दो मालो रेड कर दो ठीक है अ हर तीन सेकंड में एक रैंडम कलर जनरेट करना चाहता हू�
23:18
तो मैं क्या कर सकता हूँ मैं कुछ इस तरह से एक random color generator जो कि मैंने पिछले वीडियो में बनाया था वहाँ से उठाओंगा वै�
23:26
क्योंकि मैं बार बार यार एकी चीज नहीं करना चाहता 72 में हमने बनाया था random color generator ठीक है तो open with code करूँगा यहाँ प�
23:33
और यह था हमारा random color generator मैं यह जो था इसको मिटाऊंगा क्योंकि यह मैंने आप लोगों क�
23:41
जो solution थे वह किया था मैं get random color function को यहां से copy करूंगा ठीक है और मैं इसक�
23:47
जाऊंगा अपनी स्क्रिप्ट में ठीक है जो कि वह ज्यादा टाइम में लगाना नहीं चाहता फॉरमेट डॉक्यूमेंट करूंग�
23:52
और मैं यहां पर क्या करूंगा गैट रैंडम कलर ठीक है सिंपल एक रैंडम कलर मुझे मिल जाएगा हर तीन सेकंड में त�
23:58
आप लोग को यह पेज दिखाओ, कहा गया पेज, यह देखो, हर तीन सेकेंड में इसका कलर चेंज हो रहा है, देखेंगे आप लोग, अगर आप चाहते हो यह डिस्को ही करना शुरू करते हैं, इतनी तेसर इस कलर चेंज करें, तो आप क्या कर सकते हो, कि सिंपली यहाँ पर �
24:28
कुछ set of code run होता रहे, तो आप set interval के थरू कर सकते हो
24:32
ठीक है, फिर एक होता है clear interval, अगर मैं कहूँ, let a is equal to this
24:37
और console.log a, तो यह मुझे क्या देगा, मैं इसको reload करूँ अगर दुबारा से
24:43
तो यह मुझे क्या देगा, उपस, inspect करना चाहता हूँ, console खुलना चाहता हूँ इसने मुझे यहाँ पर one दिय�
24:50
तो मैं क्या कर सकता हूँ मैं कह सकता हूँ clear interval और मैं one कह दूँगा तो क्या होगा कि य�
24:55
होना रुक जाएगा ठीक है तो मैं enter बारूँगा तो यह interval clear हो गय�
25:00
यानि कि इसने जो भी number return किया किया उसको आप लोग clear interval के साथ use कर सकते हो और उससे यह जो set interval चल रहा था वो चलना बंद हो जाएगा ठीक है बहुत ही simple सी चीज है अब same चीज आप लोगों को मैं बताऊंगा इसकी copy बना कर और आप कहो कि copy क्यों बना रहे हो भाई भाई copy इसलिए बना रहा हूँ कि syntax same है exactly क�
25:31
सेकंड के बाद कलर चेंज कर दो तो मैं इसको रिलोड करूंगा अगर तो एक सेकंड के बाद कलर चेंज हो सिर्फ ए�
25:37
बार ठीक है तो अगर मैं चाहूं कि कुछ सेकंड बाद काम हो जाए तो मैं सेट टाइम ऑट का स्टेम अल कर सकता हूं ठी�
25:43
तो a is equal to मैंने set time out कर दिया और आप देखो यहाँ पर set time out करने स�
25:48
एक second के बाद color change हो गया ठीक है और मैं आपर set time out क�
25:54
clear भी कर सकता हूँ मैं बताता हूँ आपको मालों मैं चाहता हूँ कि 5 second के बाद color change हो जाए ठीक ह�
25:59
reload करूँगा इसको आप 5 second गिनो कलर change होने वाला है 5 second के बा�
26:05
5 second होगा है color change हो गया मैं इसको reload करूँगा और मान ल�
26:09
कि मैं चाहता हूँ कि यार मैंने ये क्या कर दिया मुझे color change नहीं करना है तो मैं clear timeout लिख दूँग�
26:14
ठीक है मैं इसको copy रखूँगा एकदम तो इसके चलने से पहले अगर मैंने clear timeout लिख दिय�
26:19
अगर मैंने clear timeout चला दिया तो यह clear हो चुका है timeout
26:24
यानि कि जो मैं करने वाला था मैंने अपना mind change कर लिया अब मैं नहीं जाता 5 second बाद change हो color
26:28
तो 5 second के बाद यह function run नहीं होगा क्योंकि मैंने clear timeout कर दिया ह�
26:33
तो set interval को cancel करने के लिए clear interval use करते है�
26:37
set timeout को cancel करने के लिए clear timeout use करते हैं ठीक है बहुत ही simple सी चीज़ ह�
26:42
I hope कि आप लोग को समझ में आ गई ठीक है with that set हमने काफी cover कर लिया ह�
26:47
और notes को जरूर access करना बहुत important है जो कि यही आपको याद दिलाएंग�
26:51
वो सारी चीज़े जो कि आपके सिग्मा कोर्स पर करी हुई है ठीक है फिर mdn reference तो है इंटरनेट लगा हुआ है आपके घर में आप दे ही रहे हो महीना 400 रुपर है ठीक है जितना भी दे रहे हो मुझे बताना comment section में I hope कि आप लोग समझ रहे हो इस चीज़ को कि notes download करना कितना important
27:21
करना है कि नहीं अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
27:25
and I will see you next time
#Flash-Based Entertainment
#Fun & Trivia