सभी अधिकार वापस स्वागत करते हैं।
इस वीडियो में मैं घटनाओं के विभिन्न प्रकार के कुछ अब तक हम क्लिक करें घटना और परिवर्तन घटना है कि हम एक पाठ इनपुट या स्कोर कीपर अनुप्रयोग में एक नंबर इनपुट पर इस्तेमाल सामना करना पड़ा है के बारे में थोड़ा और अधिक बात करना चाहते हैं।
मैं M.B.A. घटना संदर्भ को शुरू करने से शुरू करने जा रहा हूँ।
तो यह है कि वेब पेज मैं यहीं पर हूँ।
और इस वेब पेज सभी विभिन्न घटनाओं है कि डोम एपीआई द्वारा मान्यता प्राप्त हैं करने के लिए एक संदर्भ है।
और अगर हम नीचे स्क्रॉल बस आप कैसे देखते हैं पर आश्चर्य हो सकता है।
और मैं वास्तव में अगले व्यायाम में आपके पास करने के लिए सिर्फ गिनती करने के लिए देखते हैं कि कितने कुछ कोड लिखने जा रहा हूँ विपक्ष की ज्यामिति का उपयोग करने का एक मजेदार व्यावहारिक उदाहरण है ..
तो अगर आप गिनती करने के लिए कैसे देखते हैं लेकिन अब के लिए सिर्फ इतना पता है कि उनमें से एक टन देखते हैं कि वहाँ जा रहे हैं और शायद पाँच या छह शायद 10 के लिए वास्तव में आम लोगों को खींचें के लिए की तरह हर समय चीजों का उपयोग और के लिए छोड़ देंगे रहे हैं एक मँडरा घटना क्लिक करें घटनाओं शायद डबल क्लिक कुंजी प्रेस घटनाओं लेकिन अन्यथा और अधिक अस्पष्ट लोगों का एक बहुत उपयोग कभी नहीं होगा या हो सकता है कि आप उन्हें एक परियोजना में एक बार इस्तेमाल करेंगे।
लेकिन यह जानना इस वेब पेज से मौजूद है कि इतने सारे घटनाओं है कि हम भी प्रयोग नहीं कर सकते हैं या तो अच्छा है।
और इस वीडियो मैं विशेष रूप से दो घटना इतनी मँडरा अपने माउस के साथ एक तत्व पर मँडरा के साथ नहीं है उस पर ध्यान केंद्रित करने के लिए जा रहा हूँ।
और उन पर माउस और माउस के बाहर कहा जाता है।
तो मैं एक साधारण आवेदन किया है और मैं इसे अपने नए फ़ाइल में उस उम्र में उसे क्या करने के लिए कहा जाता है बनाने के लिए जा रहा हूँ और मैं सिर्फ अपने नियमित बॉयलरप्लेट जोड़ने के लिए जा रहा हूँ और यह एक पूरी सूची क्या करने के लिए नहीं किया जा रहा है।
हम नए जोड़ने के लिए सक्षम नहीं हो सकता है या हम क्या करने जा रहे हैं कि तीन या चार सहयोगियों के साथ एक उल है।
धोने बिल्ली जैसे हालात बिल्ली फ़ीड और हम कुत्ते को बिल्ली फ़ीड करने के लिए और बचा लेंगे।
इसलिए हम अपने क्या करने के तीन लोगों की है और वह सब हम अब के लिए की जरूरत है।
और मैं क्या करना चाहते हैं।
मैं ब्राउज़र में इस खोलने के लिए जा रहा हूँ।
मैं क्लिक करने के लिए सक्षम होना चाहते हैं और है कि आइटम करने के लिए बाहर ग्रे और शायद स्ट्राइकथ्रू यह इसके माध्यम से एक लाइन डाल देना चाहिए।
लेकिन मैं यह भी मंडराना करने में सक्षम होना चाहते हैं और मुझे पता है जो एक मैं पर मँडरा रहा हूँ चाहते हैं।
इसलिए मुझे यह अच्छा प्रयोक्ताओं की राय के रूप में मैं इनमें से किसी एक के ऊपर मंडराना मिलता है।
हो सकता है कि आपको यह रंग बदलने के लिए होगा या बोल्ड सिर्फ यह हरे रंग का कर रही है और वहां इन मंडराना घटनाओं का उपयोग कर तो बहुत अच्छा प्रभाव अपने उपयोगकर्ता के लिए आप कर सकते हैं से शुरू होगा।
तो मैं दिखाता हूँ कि अभी इससे पहले कि हम वास्तव में किसी भी जावास्क्रिप्ट लिख सकता है, हालांकि हम अपनी फाइल बनाने की जरूरत है।
इसलिए मैं एक नई फाइल को बचाने के लिए जा रहा हूँ और मैं क्या करने के लिए यह फोन करता हूँ।
हाँ।
और हमेशा की तरह मैं अपनी चेतावनी जुड़ा बचाने के लिए यहाँ वापस जाना और नीचे में हमारे लिपि में जोड़ सकते हैं और हमारे स्रोत उपद्रव के बराबर डॉट जे.एस. था और हम बचाने के लिए या ताज़ा और हम अपनी चेतावनी मिल जाएगा।
इसका मतलब है कि यह काम कर रहा है।
की है कि पहली घटना है कि मैंने उल्लेख किया है और पहली बात यह है कि हम क्या करने की जरूरत कुछ का चयन करने से पहले हम में हेरफेर कर सकते है पर चलते हैं।
तो मैं सिर्फ पहला झूठ करने के लिए यह कर रही द्वारा शुरू करने के लिए जा रहा हूँ।
तो मैं वर पहली सहयोगी ECOs दस्तावेज का उपयोग करने के लिए जा रहा हूँ और मैं एक प्रश्न चयनकर्ता सहयोगी करते हैं और क्योंकि मैं एक प्रश्न सभी चयनकर्ता नहीं किया है यह मेरे पहला झूठ देता याद करेंगे और फिर मैं अपने घटना श्रोता जोड़ने के लिए जा रहा हूँ पहली सहयोगी करने के लिए।
इसलिए हम पहली सहयोगी घटना श्रोता और घटना है कि हम के लिए इस पर माउस क्लिक है नहीं है सुन रहे हैं जोड़ने चला गया।
और फिर हम अपने कॉलबैक समारोह दे।
और जिस तरह से काम करता है कि mouseover इसे जल्द से आग करने के लिए जा रहा है के रूप में हम कुछ पर मँडरा शुरू करते हैं।
तो अगर मैं यह पिछले सहयोगी के साथ अपने माउस दूसरा एक और अभी और यह पहली बार एक काम कर रहा था और अधिक से अधिक यह सही अब आग और अभी जाएगा।
तो यह बारे में जब मंडराना शुरू होता है।
तो पहले की मैं इस घटना श्रोता mouseover जोड़ना चाहते हैं और हम बस पर एक लॉग बजाय एक कॉलबैक माउस करूँगा और अगर हम अपने सांत्वना खोलने के ताज़ा याद है हम केवल पहली सहयोगी करने के लिए ऐसा किया था और वहाँ हम चले हम एक mouseover मिलता है।
इसके अलावा यह यह लगातार हर बार फायरिंग नहीं की गई अधिसूचना के लिए महत्वपूर्ण है।
आप जानते हैं कि हम कर रहे हैं इस पर यह जब एक तत्व पर हमारे मंडराना वास्तव में शुरू होता है।
तो यह है कि उपयोगी इतना है कि हम लगातार नहीं हो आप लगातार प्रवेश करने जानते हैं या जो कुछ भी हम कोड कॉलबैक में है कि क्या है।
यह केवल जब हम शुरू में पर माउस होता है।
तो बजाय सिर्फ सहयोगी का रंग बदलने पर लॉगिंग चलो काम रद्द कर दें।
चलो यह हरे रंग बनाते हैं।
तो जब आप पर ले जाएं, यह हरे रंग बदल जाता है।
इसलिए हम पहली सहयोगी डॉट शैली है कि रंग हरे रंग की बराबरी करने की ज़रूरत है और हम ताज़ा बचाने के लिए और अब देखना मैं उसे एक छोटे से बड़ा बनाने के लिए और यह एक छोटे से बड़ा यहाँ बनाने के लिए और ताज़ा रूप में मैं अपने माउस शुरू पर यह हरे रंग बदल जाता हूँ।
और फिर जब मैं दूर जाना यह हरे रंग का रहता है जो कि हम क्या नहीं करना चाहता।
हम सिर्फ इस एक हॉवर प्रभाव होना चाहते हैं।
तो जब मैं सहयोगी पर ले जाएं, यह हरे रंग बदल जाता है।
लेकिन जब मैं रोक यह है कि हम वास्तव में एक और घटना और उस घटना आग जाएगा जब हमारे मंडराना खत्म हो गया है की जरूरत है काला किया जा रहा करने के लिए वापस चला जाता है।
इसलिए हम इस तत्व छोड़ दें और यह माउस के बाहर कहा जाता है तो हम एक ही बात पहले सहयोगी क्या करने जा रहे हैं।
लेकिन घटना Lessner माउस बाहर पर।
और फिर हमारे कॉलबैक समारोह और हम सिर्फ एक पहला फ्लाई शैली के हमले रंग करते हैं और इसे वापस काला करने के लिए निर्धारित करेंगे।
बस ऐसे ही और अगर हम ताज़ा आप इसे हरी जाता देख सकते हैं और फिर बाहर माउस एक हरे और इतने पर पर काले और माउस के लिए वापस चला जाता है।
तो अब हम इस छोटे से मंडराना प्रभाव क्या हम जो करने के लिए चयन किया जाता है पर मँडरा रहे मूल रूप से हमें पता चलता है कि मिलता है।
तो अब यह हर एक झूठ के लिए काम करने के लिए मिलता है।
यह सिर्फ एक कुछ छोटे बदलाव है कि हम क्या करने की जरूरत है।
और उनमें से पहले हम सभी सहयोगी दलों का चयन करने की जरूरत है।
बहुत चर बदलने जा रहे हैं तो यह है कि हमें तीन सहयोगियों के साथ एक सूची देता है अब तक झूठ दस्तावेज प्रश्नों पत्र सभी सहयोगी दलों होने के लिए।
और फिर बेशक दुर्भाग्य से हम सिर्फ इस निहित है कि एक घटना श्रोता वह काम नहीं करता नहीं कर सकते हैं।
हम अपने बराबर शून्य से चार पाश के लिए एक करने की ज़रूरत है।
मैं कम से कम है कि लिंक निहित है।
प्लस प्लस।
और उम्मीद है कि आप एक छोटे से अधिक आरामदायक इस जोड़ने की घटनाओं कर रही है या एक पाश जहां हम उनमें से एक गुच्छा का चयन करने के बजाय कुछ जोड़ तोड़ महसूस करने के लिए शुरू कर रहे हैं और उसके बाद हम के माध्यम से पाश और हम कुछ व्यक्तिगत रूप से करते हैं।
जैसे मैंने पहले वास्तव में आम पैटर्न में कुछ वीडियो वास्तव में महत्वपूर्ण है कि हम इसके साथ आराम पाने के लिए शुरू कहा।
तो यहाँ के बजाय कर रही है अंदर कुछ और पहले मैं इस घटना श्रोता जोड़ना चाहते हैं।
हम सहयोगी दलों ब्रैकेट आंखों के साथ काम कर रहे हैं ताकि हमारे व्यक्तिगत सहयोगी है।
और फिर मैं सिर्फ इस कोड को कॉपी करने के लिए जा रहा हूँ और वहाँ इस कोड के साथ एक समस्या है।
मेरा मतलब है कि यह काम करेगा, लेकिन यह तरीका है कि हम यह चाहते हैं में काम नहीं करेगा।
क्या होगा हम एक सहयोगी सहयोगी दलों के लिए एक घटना श्रोता जोड़ रहे है।
लेकिन जब हम उनमें से किसी को हम केवल बदल रहे हैं पहले सहयोगी डॉट शैली काले रंग पर माउस।
और वास्तव में यह क्योंकि पहला झूठ अब और परिभाषित नहीं है काम नहीं करेगा।
हम नाम बदल दिया है।
लेकिन यह है कि क्या हम वैसे भी चाहता था।
हम इसे सहयोगी कि पर hovered था कि घटना पर माउस पर हुआ होना चाहते हैं।
तो हम शब्द यह करने के लिए इसे बदल सकते हैं।
याद रखें कि इस महत्वपूर्ण शब्द के बजाय एक घटना श्रोता आइटम या तत्व है कि घटना पर शुरू हो गया था को दर्शाता है।
इस शैली है, लेकिन रंग का बराबर स्क्रीन तो और फिर हम तो बस फिर इस कोड को नकल करेंगे।
लेकिन माउस के बजाय से हम एक माउस बाहर कर देंगे और इसके बजाय ग्रीन के पास जाने की हम वापस काला करने के लिए जाना होगा और फिर हम इस से छुटकारा मिल सकता है और ताज़ा और वहाँ हम चले।
हम अपने अच्छा सा मंडराना प्रभाव है।
तो आखिरी बात के बारे में वे एक क्लिक श्रोता जोड़ने का है बात करेंगे सिर्फ इस एक छोटे से अधिक पूरा करने के लिए।
तो एक ही बात है जैसे मैंने सोचा था घटना श्रोता जोड़ सकते हैं या एक कॉलबैक समारोह क्लिक करें।
और क्या हम यहाँ क्या करने जा रहे हैं एक वर्ग का उपयोग है।
तो मैं सिर्फ प्रथम श्रेणी जोड़ने के लिए जा रहा हूँ।
यह मौजूद नहीं है, लेकिन मैं इस वर्ग की सूची है कहने के लिए जा रहा हूँ और शुरू वर्ग की सूची है कि टॉगल को चालू करना होगा।
और हम सिर्फ फोन करता हूँ कक्षा किया।
तो बात मैं इनमें से किसी एक पर क्लिक कर सकते हैं और इसे बाहर ग्रे और एक स्ट्राइकथ्रू प्रभाव होना चाहिए है।
और भले ही मैं एक वर्ग किया परिभाषित यह अभी भी जोड़ा है तो मैं उस सांत्वना को खोलने के लिए आपको दिखाई और हम इनमें से किसी एक का निरीक्षण करने दे सकते हैं नहीं है।
और फिर वास्तव में इस पर क्लिक करते हैं और आप देखेंगे या पहले से एक आप जिस तरह से रंग हरे और काले यहाँ बदलने के लिए एक मंडराना रूप से देख सकते हैं पर क्लिक कर सकते हैं।
लेकिन जैसा कि मैंने यह पहले एक पर क्लिक करें यदि आप यह वर्ग किया कहते हैं देख सकते हैं।
और फिर मैं फिर से क्लिक करें और इसे दूर चला जाता है।
तो अब हम सिर्फ कक्षा किया परिभाषित करने की जरूरत है।
तो चलो कि अब करते हैं।
मैं उदात्त करने के लिए खत्म हो जाने और एक नई फ़ाइल बनाने के लिए और मैं के रूप में करना है कि सी एस एस और पहली बात हम करते हैं को परिभाषित हमारी क्लास किया है इस बचाने के लिए जा रहा हूँ।
और मैं इसे एक स्ट्राइकथ्रू प्रभाव है जो हम पाठ सजावट के साथ क्या देने जा रहा हूँ और हम के माध्यम से उस लाइन की स्थापना की और भी अस्पष्टता बदल तो अस्पष्टता 0.5 हो सकता है और बचत होगी।
और फिर बेशक आप इस के लिए आकलन करने के लिए शुरू करने के लिए या उसे कारण है हमें gutsiest को टैग की तरह उनके साथ फाइल आयु वर्ग के हैं और हम बचा सकते हैं लिंक करने की जरूरत है।
अब हम इसे बाहर का परीक्षण करते हैं।
आप पृष्ठ ताज़ा करें।
मैं उड़ना।
तो मिल बदलते रंग काले और हरे रंग दो घटनाओं रहे हैं।
और अब मैं क्लिक कर सकते हैं और हम एक स्ट्राइकथ्रू प्रभाव मिलता है।
और के रूप में अच्छी तरह के माध्यम से इस लाइन।
कुछ छोटे परिवर्तन मैं फिर भी बनाना होगा अगर हम अपने जावास्क्रिप्ट फ़ाइल पहले एक मैन्युअल यहाँ रंग बदलने के बजाय है के लिए वापस जा रहे हैं।
इसे बदलने हरे और काले होने के लिए।
मुझे लगता है कि यह अभी भी हमारे अपने वर्ग के साथ यह करने के लिए बेहतर है।
तो मैं एक नया वर्ग बनाने के लिए जा रहा हूँ और मैं चयनित इस एक फोन करने के लिए जा रहा हूँ और फिर मैं कहना है कि जब यह पाठ या रंग का चयन किया गया है कि बस की तरह हरा होना चाहिए जा रहा हूँ।
और फिर हम जावास्क्रिप्ट के साथ जाना होगा।
और कहते हैं कि इस वर्ग की सूची में चयनित जोड़ते हैं हम सब हम क्या करना चाहते हैं पर माउस है।
और यह वापस चिंताओं विचार की कि जुदाई जहां हम अपने जावास्क्रिप्ट का छेड़खानी व्यक्तिगत शैली बल्कि हम वास्तव में स्टाइल के आरोप में किया जाएगा हमारे सी एस एस और एसएएस के कुछ हिस्सों पर बारी करने के लिए JavaScript उपयोग कर सकते हैं नहीं करना चाहती के लिए आता है।
तो यह है कि यह वर्ग में चयनित दे देंगे जब हम पर जाएँ और जब हम छोड़ दें या जब हम बाहर गंदगी हम क्या करेंगे यह गूंगा वर्ग सूची हटाने का चयन किया है और हम ताज़ा बचाने के लिए यदि आप यह बहुत अच्छा लग रहा है देख सकते हैं।
हम हम अपने स्ट्राइकथ्रू मिल पर क्लिक करें।
ठीक है।
वहाँ एक छोटी सूची करने के लिए है।
तो यह इसे करने का एक थोड़ा अच्छे तरीका है।
कार्यात्मक यह एक ही लग रहा है।
बल्कि यह एक समय में एक से जोड़ने और tweaking शैलियों से वर्गों का उपयोग करने के लिए सिर्फ एक बेहतर अभ्यास है।
यहाँ तो योग करने के लिए हम दो नई घटनाओं mouseover और माउस के बाहर देखा।