Up next in 10
Handling Browser Events _ JavaScript Tutorial in Hindi #48
130 views
Feb 9, 2024
"Handling Browser Events" is the 48th tutorial in a series of JavaScript tutorials presented in Hindi. In this video, viewers delve into the practical aspects of managing browser events using JavaScript. The tutorial likely covers topics such as adding event listeners, event propagation, event object properties and methods, and event delegation. Through hands-on examples and explanations in Hindi, viewers will learn how to effectively respond to various user interactions such as clicks, mouse movements, keyboard inputs, and more. By mastering event handling techniques, viewers can create more interactive and responsive web applications. This tutorial is tailored for Hindi-speaking audiences seeking to deepen their understanding of JavaScript and improve their skills in web development by mastering the intricacies of browser event handling.
View Video Transcript
0:00
गेज आज के इस वीडियो में मैं आप लोगों को बताऊंगा किस तरह से एक event listener को आप लोग add कर सकते हैं किसी भी element प�
0:06
और किस तरह से एक event listener को remove किया जा सकता है किसी भी element से चलते हैं computer streamers और इन methods को बहुत closely समझेंग�
0:12
let's get started अब हम लोग देखेंगे कि एडिवेंट लिस्ट नर रिमूव एवेंट लिस्ट कब काम करता है क्यों यूज करना चाहिए और क्यो�
0:27
आप लोगों को यह काफी हेल्प करेगा तो मैंने यहां पर एक रैपल बना रखिए और इसका नाम में रखूंगा एडिवेंट लिस्�
0:44
बहुत दिया जाए तो एक काम हो ठीक है दिया इस बात को मिल्टिपल हेंडलर्स टू एंड एवेंट एक काम और उसी क�
0:58
साथ एक दूसरा काम यानि कि मैं यह कह रहा हूं कि आप लोग चाहते हो कि एक इवेंट लेस्टर आप लोगों ने लग�
1:05
किया मान लो कि आपने टास्क ए करने के लिए इवेंट लिस्ट लगाया अब टास्क ए नाम का फंक्शन रन कर रहे हो औ�
1:12
आप लोग टास्क बी नाम का भी फंक्शन रन कर रहे हो यह काम आप अचीफ कर सकते थे टास्क ए और टास्क बी यह दोनो�
1:18
को run करके, एक event listener के अंदर, लेकिन आपने अलग-अलग लगाए, ठीक है
1:22
अब आप चाहते हो कि, task A जो है, आपने बाद में अपना mood बना लिया, या फिर कुछ परिस्थितियां
1:27
ऐसी हुई आपके program में, कि आप चाहते हो कि, task A जो है, वो ना हो
1:31
वह ना करें क्लिक पर या किसी भी विडियो पर लेकिन टाइम भी रन करें आप लोग ऐसा सिर्फ अलग-अलग इन ट्रे�
1:38
मल्टिपल हैंडलर्स किसी भी एक इवेंट पर लगाकर कर सकते हो मैं समझाता हूं कि मैं क्या कह रहा हूं और क्यो�
1:43
जरूरी है ठीक है स्क्रिप्ट और जिसको खोल दिया मैंने यहां पर और बहुत ही सिंपल सा बहुत बहुत ही सिंप�
1:50
सा एक यहां पर मैं डिव बनाऊंगा और इसके बाद मैं यहां पर लिखूंगा बटन और यहां पर मैं लिखूंगा क्लिक मे�
1:58
ठीक है और दो फंक्शन बनाऊंगा ओविस्टिव मैं जावास्क्रप्ट बनाऊंगा और मैं यहां पर एक काम करता हूं वैसे आईड�
2:05
डालने की जरूरत नहीं थी लेकिन मैंने डाल दी आईडी मैं वैसे डॉक्यूमेंट और गैट एलिमेंट्स पाइट टैग नेम भ�
2:10
सकता था लेकिन कोई बात नहीं आए ठीक है मैं यहां पर दिखूंगा बीटी एंड डॉट अडिवेंट लेस्ट ना देखो यार य�
2:17
कितना बढ़िया है यार देख रहे हो रैपलेट यार मज़ा आ गया सची में रैपलेट यार मज़ा आ गया सची में रैपलेट सची मे�
2:24
आ गया ठीक है पता नहीं क्या करवा रहा है मेरे से लेकिन अभी के लिए जो है हम इसको सिर्फ इतना रहने देत�
2:30
हैं और हम बहुत ही सिंपल सा काम करेंगे एलर्ट कर देंगे हेलो ठीक है अब यहां पर हेलो वर्ड वाओ जिस साउं�
2:39
cool ठीक है अब यहाँ पर हम क्या करेंगे इसको copy करेंगे और मान लो मैं यहाँ पर hello word 2 इससे कहलव�
2:46
रहा हूँ यहाँ पर मैं hello word 1 कहलवा रहा हूँ क्या मैं इस काम कर सकता हूँ हाँ obviously मैं इस काम कर सकता हू�
2:51
for example अगर मैं आप लोगों को अभी दिखाऊं और मैं इस button पर click करू�
2:55
तो आप लोग देखोगे एक तो hello word 1 आया okay करूँगा hello word 2 भी आएगा दोनों चल�
2:59
ठीक है लेकिन अब for some reason मैं चाहता हूँ कि मैं hello word 1
3:06
ना कहलवाओ यानि क्लिक पर hello word मैंने यह चीज लिख तो दी लेकिन मैं चाहता हूँ कि सबस�
3:11
पहले क्या होना सबसे पहले let a is equal to prompt ठीक ह�
3:16
मान लो मैं यहाँ पर prompt लिखना चाहता हूँ और मैं यहाँ पर what is your favorite number
3:21
मान लो किसी ने 0 लिख दी अगर किसी का favorite number 0 है तब मैं यहाँ प�
3:37
पर प्रोग्राम को इस तरह से कि हम पहले लगाते हैं उसके बाद यह काम करते हैं ठीक है तो मैं क्या करूंग�
3:45
event listener event listener remove
4:02
कि btn.remove event listener करना पड़ेगा btn.remove event listener आदत पड़ गई है मुझ�
4:11
raplet के i mode की यह आदत अच्छी नहीं है दोस्तों आप मट डालना ठीक है मट डालना वनना क्या होगा कि नहीं मिलेगा जब आपको तो आप लोग कहोगे ये क्या चल रहा ह�
4:21
देखो मैंने यहाँ पर remove event listener कर दिया मैंने कहा भाई event listener हटाओ ये वाल�
4:25
लेकिन ये काम नहीं करेगा और क्यों नहीं करेगा ये मैं आप लोगों को बताऊंग�
4:29
बट जो चीज काम करेगी पहले वो बता देता हूँ देखो अगर मैं अभी मैं आपको चला कर दिखाता हूँ यहाँ पर कि य�
4:37
क्या होगा मैं इसको रिलोड कर रहा हूँ वो टीज फेवरीट नंबर मान लो फेवरीट नंबर मैंने टू डाल दिया ठीक है मैं डिलोड करेंगे इसका फेवरी�
4:45
नंबर टू डाल देता हूं लोग जी टू डाल दिया मैंने मैं यहां पर यह इकुड इकुड ऐसे कर देता हूं कि य�
4:52
string लेता है तब भी क्या होगा कुछ नहीं होगा ठीक है मैं यहां पर मालो टू करूं और ओके करूं और अब मै�
5:02
क्लिक करूंगा वर्ड वन और टू मुझे दोनों दिखा ही पड़ रहा है वह कोई यार रिमोव इवेंट लिस्टर तो इवेंट क�
5:06
आता है न तो ये क्या सरकास है यार ठीक है तो क्या होगा कि ये एक अलग function object है और ये एक अलग function object है यानि कि ये जो reference है function का reference है वो same होना चाहिए remove event listener के काम करने के लिए तो अगर मैं यहाँ पर कुछ ऐसा कर दूं कि भाई let a is equal to या फिर let x is equal to और इस पूरे function को मैं x का नाम �
5:36
इसको मैं एक्स का नाम दूं और इसको वाइट का नाम दूं ठीक है मैं आप अलवाई इस एक्वल टू कुछ इस तरह से वाइट क�
5:46
नाम दूं इसको क्या करूं इसको वाइट का नाम दूं इसको एक्स का नाम दूं अब देखो मैं आप एक्स और वाइट इस्तेमा�
5:53
करूँगा तो मैं remove कर सकता हूँ मैं कह सकता हूँ कि भाई सा�
5:57
एक काम करिए कि यहाँ से x को हटा लीजे क्या करिए x को क्या कर लीजे हटा लीज�
6:03
ठीक है न x को यहाँ से हटा लीजे अब अगर ऐसा करूँगा मैं btn
6:09
remove event listener भाई साब event listener क्लिक वाइब वैसे आप लोगों को गया पहले यह लेसर की स्पेलिंग अलग थी इसलिए आप नहीं करेगा काम यहां प�
6:22
यह काम मैंने किया अब मैं रिलोड करूंगा अब देखना कि अगर मैं यह कैसा बजाग है वाइज आप यह कैसा मजाग ह�
6:31
यारन आ रहा है क्या कंसोल में ओके यार वो ब्रैकेट मुझे हटाना नहीं था यार वो ब्रैकेट तो इफ का थ�
6:38
मैं रिलोड करूँ अगर मालो मैंने यापर वन लिखा ओके किया अब मैं क्लिक में करूँगा तो hello word वन आया hello word टू भी आय�
6:47
लेकिन ऐसा क्यों हुआ वाले को रिमोव कर दिया तो मुझे एक वाले को रिमोव करना चाहिए था तब सिर्फ हेलो वर्ड 2 आत�
7:05
अब मैं रिलोड करता हूँ फिर से मालो मैंने 1 लिखा कर तो दोनों आएंगे क्लिक मी किया हेलो वर्ड 1 भी आएगा हेलो वर्ड 2 भी आएग�
7:12
लेकिन अगर मैंने � comedies को रिलोड करने के बाद टू लिखा और इसके बाद मैंने यहां पर हेलो वर्ड टू दिखेगा मुझे ठीक ह�
7:21
remove event listener function reference function add event listener
8:00
और उसी को remove करने के लिए पास करना remove event listener में ठीक है अब आ जाते हैं यहाँ पर और देखते हैं कि मैंने क्या लिखा हुआ ह�
8:06
add event listener is used to assign multiple handlers to an event
8:10
किसी भी एक event के multiple handlers जैसे कि मैंने यहाँ पर click event को यहाँ पर handle किय�
8:16
आप mouse over आप लोग बहुत सारे events होते हैं सब को आप लोग देख सकते हो
8:20
और इनमें से कोई भी event यूज़ कर सकते हो, add event listener क्या करेगा, add कर देगा event को
8:25
मतलब handler चलेगा आपका, जब भी event होगा, और remove event listener क्या करेगा
8:31
remove कर देगा, और note लिखा हुआ है, handler must be the same function object for this to work
8:35
और मैंने समझा दिया आप लोगों को तो आप यह नहीं कह सकते कि यह इतना parenting लिख दिया और समझा आया नहीं समझा भी दिय�
8:39
देखो मैंने ठीक है event object की बात करते हैं होता क्या है कि जब भी हम on click वाला function run करते है�
8:46
जैसे कि इस case में हम क्या कर रहे हैं इस case में हम लोग ये run कर रहे है�
8:50
देखो इसने यहाँ पर function जब मैंने reflet का auto generate लगाया तब reflet ने यहाँ पर देख�
8:54
ई एक खुद पास किया यह ई क्या होता है अब आप चाहो तो इसको ले लो चाहो तो मत ल�
8:59
मतलब कि अगर आप लोग यहाँ पर आप यहां पर कुछ इस तरह से करोगे और इसके बाद मैं आप इसको रिलोड करता हूं मैं यहां पर टू करता हूं और मै�
9:09
क्लिक में करता हूं तो आप देखो यहां पर पॉइंटर इवेंट यहां पर आगे आप देख सकते हैं यहां पर पॉइंटर इवें�
9:14
यह इवेंट ऑब्जेक्ट है, इसके अंदर तमाम सारी चीजें हैं, ठीक है, एक मैं आप लोगों को बहुत ही सिंपल सा एक्जांपल देता हूँ
9:20
मैं अगर आप लोगों को यहाँ पर console लॉक करके दिखाओं, यह डॉट टारगेट तब क्या चीज प्रिंट होगी वह मैं आपको दिखाता हूं और मैं चीज और करूंगा यहां प�
9:28
यार यह प्रॉब्लम हो रहा हूं थोड़ा सा नॉयं हो रहा है और मैं यह दोनों चीज हटाऊंगा यहां से सिर्�
9:33
आपको देखना तो आप लोग यहां पर फोक करना तो अपने को प्ले राउंड करना ठीक है यहां पर वाला जो है वह भी नही�
9:44
इसका कोई काम नहीं है कि मैंने यह हटा दिया सिर्फ एक्स वाला है याद रखना आप लोग अभी मैं इसको रिलोड करू�
9:50
और click करूँ तो hello world 1 आ रहा है और यहाँ पर देखो e.target आ गया आप देखो यहाँ पर e.target से क्या आय�
9:56
जिस पर click किया मैंने जिस बटन पर click किया वो आ गया e.target की जगा प�
9:59
तो e.target यह होता है अब यहाँ पर मैं alert भी हटाओंग�
10:04
क्योंकि alert भी रोडा knowing हो रहा है अगर मैं यहाँ पर console.log e करू�
10:09
तो मैं यहाँ पर इसको inspect कर सकता हूँ और मैं यह देख सकता हूँ कि या�
10:12
इस object के अंदर मुझे क्या क्या देखने को मिलेगा अब यहाँ पर देखो मुझे तमाम चीज़े देखने को मिल रही है�
10:34
लेकिन आप लोगों को बहुत अच्छी तरह से बता चल जाएंगी इस सब को देख कर जैसे कि टार्गेट ह�
10:39
टार्गेट क्या है बटन है ये बटन टार्गेट है फिर उसके बाद स्क्रीन है स्क्रीन वा�
10:43
यह साली property को आप लोग Google search करके देख सकते हो कि इसका क्या मतलब है या फिर आप क्या कर सकते ह�
10:49
यह देख सकते हो कि किस तरह से या फिर कौन सी वाली वो property ह�
10:53
जिसको आप लोग को use करना चाहिए एक certain काम करने के लि�
10:57
या अगर गूगल सर्च करोगे तो आपको मिल जाएगा, so I hope कि आप लोगों को समझ में आया
11:01
किस तरह से event handlers काम करते हैं, और ये event object क्या है, जब आप देख लेते हैं कि मैंने क्या लिखा हुआ है notes में
11:06
when an event happens, the browser creates an event object, puts details into it
11:11
and passes it as an argument to the handler, simplify करता हूँ इस चीज़ क�
11:15
जब भी आपने यहाँ पर lm.onclick is equal to function event और इसके अंद�
11:19
कुछ काम किया हुआ है तो क्या करेगा browser जैसे कोई click करेगा एक event object बनाएगा और उसक�
11:25
function को pass कर देगा automatically आपको कुछ करने की ज़रूरत नहीं है आप यहाँ पर simply
11:29
अपने handler में event लिखो और ये event आपको अंदर मिल जाएगा function के अब यहाँ पर अगर मैं य�
11:34
इ ना लिखो अगर ये इ ना लिखो मैं और इसको भी comment out कर दो सिर्फ alert hello word कर दो इसक�
11:40
तो ऐसा तो नहीं है कि यह चलेगा नहीं यह बिल्कुल चलेगा alert होग�
11:44
console error error event hairy event gakopi
11:56
यहाँ पर भी मुझे event लिखना पड़ेगा, मैं इसको uncomment करता हूँ, और नहीं आएगा error, कोई सवाली नहीं उठता, सवाली नहीं उठता कोई error आने का, आप देखो यहाँ पर यहाँ गया और यहाँ पर यहाँ गया, तो I hope कि आप लोगों क्लेयर हो गया यह कि किस तरह से का�
12:26
की किस तरह का event है ठीक है event.type आप लोग करोगे अगर मैं यहाँ पर कर देता हू�
12:30
तो आपको मिल जाएगा यहाँ पर pointer event ठीक है फिर इसके बा�
12:34
current target किस element ने handle किया इस event को क्योंकि अगर आप किसी box पर event लगा रहे हो त�
12:40
अंदर के elements पर भी event लग जाएगा तो वो चीज भी आप लोगों ध्यान में रखती ह�
12:44
client x, client y coordinates of the cursor ठीक है तो ये चीज आप लोगों क�
12:48
पता जलेगी अब मालों मैं client x और client y को भी करता हूँ event.client x event.client y
12:58
और मैं अगर इसको अभी reload करूँ और मैं यहाँ पर click करूँ तो आप लोगों देख�
13:12
देखने को अगर आप यह पता करना चाहिए कहां पर यूजर ने क्लिक किया तो वह चीज भी आप कर सकते हो देख�
13:24
मतलब कितना कंट्रोल आपके हाथ में होता है जब आप जावास्क्रिप्ट प्रोग्रामिंग करते हैं जब आप वे प्रोग्रामिं�
13:30
using javascript तो अगर आपने अभी तक ये playlist access नहीं कर रही है तो इसको जरूर access करन�
13:35
this concludes chapter number 8 मैं आपको बता दूँ chapter number 8 की जो pdf है वो मैंने दे रखी है आप प�
13:41
इसमें मेरा अंगूठा भी feature हो रखा है, तो वो भी आप लोगों को देखने को मिलेगा
13:45
बहुत सारे लोग पूछने की, यह क्या है य position है, यह अंगूठा है, हाथ पकड़के खेची है, पोड़ो मैंने copy पकड़के
13:50
I hope कि मज़ा आया यार, काफी चीजे सीखी काफी डिडेल में मैंन�
13:54
ब्रेकडाउन की चीजे और मज़ा आता है यार पढ़ाने में मज़ा आता ह�
13:58
कि यार सारी चीजे एकदम एकत्रित हो गई इतने अच्छे नोट्स मैंने शायद ही लिखे कभी जावास्क्रिप्ट क�
14:04
मैंने जब सारी चीज़ों को एक अतरित मुझे बता था कि यह चीज़ कहाँ पर है मेरे दिमाग में बहुत सारी resources है�
14:09
यह चीज़ यहाँ अच्छे है यह चीज़ यहाँ से देख सकते हैं यह वाला ब्लॉग अच्छा ह�
14:12
stack overflow answer पे दिमाग में था वो मैंने सब कुछ एक अतरित करक�
14:17
एक जगा बर ला दिया है भी तो आप लोग इसको ज़रूर access करना playlist क�
14:20
playlist को और PDF को PDF को ज़रूर access करना क्योंकि या�
14:24
PDF में बहुत मेहनत पड़ी है बहुत मेहनत पड़ी है वीडियो record करने स�
14:29
ज्यादा मेहनत लगती है notes को लिखने में तो इसको जरूर access करें सब लो�
14:32
और आप लोगों को बता दूं मैं कि codewithharry.com पर एक notes का section भ�
14:38
आप लोगों को देखने को मिलेगा तो यहाँ पर आप लोग notes देख सकते हैं अगर आप PDF notes प�
14:42
click करेंगे तो सीधे बिना किसी ज़्यादा आपको परचान किए एक PDF note सीधे आप लोग को मिल जाएगा खोल के सीधे पढ़ो आ�
14:49
लोगों के लिए मैंने यहाँ पर जो है assemble किये हुए Android के notes PDF simple click करो और आप लोग को मिल जाएगे ये स�
14:56
एकदम डाउनलोड होके, सीधा आपके डाउनलोड सेक्शन में जाएंगे, कुछ आपको करने की जरूरत नहीं है, सिंपल आप लो�
15:02
जो है इसको, मज़े करो, पढ़ो, बहुत मेहनत से लिखे हैं सारे नोट्स, बहु�
15:06
टाइम देके लिखे हुए हैं, और और बहुत time देखे, बहुत मेहनट डाल के लिखे हैं हमारे
15:09
तो ये सारे notes आप लोड़ कर सकते हो, JavaScript coming soon है, तो description में जो link है भी
15:15
वहाँ पर मैं सारे update कर रहा हूँ, drive link है वो, तो वहाँ से आप उठा लेना, और just आपको बताना चाहता था मैं यहाँ पर
15:20
अभी के लिए इस वीडियो में इतना है प्लेलिस को एकसेज जरूर कर लेना या क्लिक करके bookmark या क्लिक करके save कर लेन�
15:25
Thank you so much guys for watching this video and I will see you next time
#Flash-Based Entertainment