Pekâlâ, hoş geldiniz.
Bu videoda şimdiye kadar farklı olay türlerinden bazıları hakkında biraz konuşmak
istiyorum; tıklama olayıyla ve skor tutucu uygulamasındaki bir metin girişinde veya sayı girişinde kullandığımız
değişim olayıyla karşılaştık.
M.'ı tanıtarak başlayacağım. B. A. olay referansı.
İşte buradayım web sayfası.
Bu web sayfası, DOM API'sı tarafından tanınan tüm farklı etkinliklere bir referanstır.
Ve aşağıya inersek, kaçının olduğu konusunda şaşkına dönebilirsin.
Ve aslında bir sonraki alıştırmada size kaç tane olabileceğini saymak için
bazı kodlar yazacağım. Eksileri geometrisini kullanmanın eğlenceli bir pratik örneği. Yani kaç tane var sayacağım ama şu an sadece bir ton var
biliyorsun ve muhtemelen beş veya altı belki 10'a kadar gerçekten ortak olanlar
her zaman sürükle ve bırak gibi şeyler kullanacak. Fareyle gezinen bir etkinlik tıklama olayları belki çift tıklamayla tuş vuruşu
olaylarını etkiler ancak aksi halde daha belirsiz olanların hiçbiri kullanmaz veya belki bir projede bir kere kullanır.
Ancak, bu web sayfasının var
olduğunu bilmek hoşumuza gidiyor;
gezinmekle ilgilidir.
Ve bu videoda özellikle iki etkinliğe odaklanacağım, fareyle bir öğenin üzerinde gezinerek
Ve buna fare bitti ve fare hareketi deniyor.
Bu yüzden basit bir uygulamanın olması ve onu yeni
dosyamda çağırması için çağıracağım ve normal normal ifademi ekleyeceğim ve bu, yapılacakların tam listesi olmayacak.
Yeni ekleyemeyeceğiz ya da yapacağımız üç ya da dört müttefiki olan bir UL'e sahip olacağız.
Yıkama kedi besleme kedi gibi şeyler ve köpek besleme yapmak ve kurtarmak gerekir.
Dolayısıyla, yapacaklarımız üçümüz var ve şu an ihtiyacımız olanın hepsi bu.
Ve ne yapmak istiyorum.
Bunu tarayıcıda açacağım.
Tıklayabilmek istiyorum ve bu, yapılacak işi
gri yapmalı ve belki de çizgi üzerinde bir çizgi koymalıdır.
Ancak aynı zamanda havada kalabilmek istiyorum ve hangisinin üzerinde gezindiğimi bilmek istiyorum.
Bu yüzden, bu güzel kullanıcı geri bildirimlerini, bunlardan birinin üzerine getirdiğim halde alıyorum.
Belki de rengi değiştireceksiniz veya cesur yeşil renkte yaparak
başlayacak ve bu geçiş olaylarını kullanarak kullanıcı için yapabileceğiniz çok güzel efektler var.
Bu yüzden dosyamızı oluşturmamız gerekse de şu an herhangi bir javascript yazabilmemiz için hemen göstereceğim.
Böylece yeni bir dosya kaydedeceğim ve bunu yapılacak işler için arayacağım.
Evet.
Ve her
zamanki gibi benim uyarı bağlantılı kaydetmek buraya git ve altındaki komut dosyamızı ekleyin ve kaynak deuce dot J. eşittir. S. ve kaydedeceğiz veya yenileyeceğiz ve alarmımızı alacağız.
Bu da çalışıyor demektir.
Bahsettiğim ilk olaya geçelim
ve yapmamız gereken ilk şey, manipüle etmeden önce bir şeyler seçmek.
Bu yüzden sadece ilk yalana kadar başlayacağım.
Bu yüzden var müttefiki ECO'lar
belgesini kullanacağım ve bir sorgu seçici müttefik yapacağım ve bu bana ilk yalan verdiğini hatırlıyorum çünkü bir
sorgu seçici yapmadım ve sonra olay dinleyicisini ekleyeceğim İlk müttefikler
İlk müttefik
olarak olay dinleyicisi ekledik ve dinlediğimiz etkinlik tıklanmadı fare bitti.
Ve sonra geri arama fonksiyonunu veriyoruz.
Bir fare üzerinde gezinmeye başlar başlamaz mouseover'ın çalışması da ateş edecek.
itibaren, ikinci ve şimdiki zamandaki ilâçlarımı ateşleyecekti.
Dolayısıyla bu son müttefiklerimle çalışıyordum, üzerinde farem şu andan
Dolayısıyla, fareyle üzerine gelme başladığında gerçekleşir.
İlk olarak olay dinleyicisi mouseover'ı ekleyeceğim
ve yalnızca bir geri arama fare yerine bir günlük yapacağız ve konsolumuzu yenileyecek
olursak, bunu yalnızca ilk müttefiklerimize yaptığımızı hatırlayın ve oraya gidelim, mouseover alalım.
Ayrıca her seferinde sürekli ateş etmediğini fark etmek önemlidir.
Biliyorsun, bir eleman üzerinde gezinmenin başlangıcı olduğu zaman bitti.
bildirimde olan kod ne olursa olsun bilemeyiz.
Böylece, sürekli olarak günlüğe kaydetme veya geri
Başlangıçta fareyi dolaştığımızda olur.
Dolayısıyla, bu loglamayı iptal etmek yerine, müttefik rengini değiştirmeye çalışalım.
Haydi yeşil yapalım.
Böylece üzerinde gezinirken yeşil olur.
Dolayısıyla, renk yeşil renge
eşit olan ve onu yenileyip şimdi biraz daha büyük yapacağımızı ve bunu biraz daha büyük yapacağımızı ve fare başlangıcımda
tazelenmesini izleyerek yeşile dönen ilk müttefik nokta stilini yapmamız gerekiyor.
Ve sonra gittiğimde istediğim gibi olmayan yeşil kalır.
Bunun sadece bir efekt efekti olmasını isteriz.
Dolayısıyla müttefikler üzerine geldiğimde yeşil renkte yanıyor.
Ancak durduğumda bunu yapmak için siyaha
dönüyor, aslında başka bir etkinliğe ihtiyacımız var ve gezinme bittiğinde o etkinlik patlatılacak.
Bu elemandan ayrıldığımızda buna Fare çıkışı denir, böylece aynı şeyi ilk müttefikler yapacağız.
Fakat olay Lesser fare dışında.
Ve sonra geri arama fonksiyonumuz ve ilk sinek stili saldırı rengini yapacağız ve siyaha döneceğiz.
Tıpkı öyle ve yenilersek yeşilin gittiğini görebilir ve sonra
fare dışarı yeşil ve benzeri bir şekilde siyah ve fare döner.
Böylece, şimdi, temelde hangisinin
seçileceğini göstereceğimiz, bu küçük gezinme efektini alıyoruz.
Şimdi bunu her yalan için çalışmaya başlayalım.
Yapmamız gereken sadece birkaç küçük değişiklik.
Birincisi tüm müttefikleri seçmemiz gerekiyor.
üç müttefiklerle birlikte bir liste çıkarıyor.
Çok yalancı olmak için çok değişken değişecek mektubumuz tüm müttefiklerle belgelenmiş belgelerle yazılmış, böylece
Ve elbette ki maalesef, işe yaramayan bir olay dinleyicisinin bunu yalan söyleyemeyiz.
Dörtlü sıfırdan eşit bir for döngüsü yapmamız gerekiyor.
Ben o bağlantıdan daha azım.
Ayrıca artı.
Ve umarım olayları eklemeyi veya
bir şeyleri bir döngü yerine bir şeyi manipüle etmeyi biraz daha rahat hissetmeye
başlıyorsunuz, burada bir grup seçiyoruz ve ardından dönüyoruz ve tek tek bir şey yapıyoruz.
Dediğim gibi
birkaç video önce gerçekten ortak desen gerçekten önemlidir onunla rahat olsun başlar.
Dolayısıyla önce burada olmak yerine önce olay dinleyicisi ekleyelim.
Müttefiklerimizle paralel gözlerle çalışıyoruz, bu yüzden müttefiklerimiz müttefiklerimizdir.
Ve sonra bu kodu kopyalayacağım ve bu kodla ilgili bir sorun var.
Demek istediğim işe yarayacak ama istediğimiz gibi çalışmıyor.
Her müttefiklerimize bir olay dinleyicisi ekleyeceğiz.
Fakat herhangi birinin üzerine fareyle baktığımızda yalnızca ilk müttefik nokta stilini siyah renkte değiştiriyoruz.
Aslında işe yaramayacak çünkü ilk yalan artık tanımlanmadı.
Adını değiştirdik.
Ancak biz zaten istediğimiz bu değil.
Bunun fare üzerinde olay üzerine oluştuğunun üzerinde gezinilen müttefik olmasını isteriz.
Yani bu kelimeyi bu kelimeyle değiştirebiliriz.
Bir etkinlik dinleyicisi yerine anahtar kelimenin,
olayın tetiklendiği öğeyi veya öğeyi belirtir olduğunu unutmayın.
Dolayısıyla bu stil ancak aynı ekranda renkli olur ve sonra bu kodu tekrar tekrar çoğaltırız.
Ama fare yerine fare çıkaracağız ve Green'e
dönmek yerine siyaha geri döneceğiz ve bundan kurtulup yenileyip oraya gidiyoruz.
Güzel hover efektimiz var.
Bu yüzden konuşacakları son şey, bunu sadece biraz daha eksiksiz yapmak için bir tıklama dinleyicisi eklemek.
Aynı şey, olay dinleyicisi tıklama ekleme veya geri arama işlevi olduğunu düşündüğüm gibi.
Ve burada yapacağımız şey bir sınıf kullanmaktır.
Bu yüzden önce sınıfı ekleyeceğim.
​​sınıfı listesini geçireceğim söyleyeceğim.
Var değil, ancak bu sınıf listesi yapar ve gidip geçiş başlangıç
Ve biz sadece sınıfı bitti olarak arayacağız.
Mesele şu ki bunlardan birine tıklayabilirim ve Grey dışarıya çıkmalı ve üstü çizili bir efekt sağlamalıyım.
Ve tanımlanmış bir sınıfım olmamasına rağmen yine de eklendi,
böylece konsolun açıldığını gösterebilir ve bunlardan birini inceleyelim.
Ve sonra aslında üzerine tıklayalım ve görebileceğiniz ilk
olanı görebilir veya tıklayabilirsiniz, burada yeşil ve siyah renk, burada üzerine gelmek şeklinde değişiyor.
Ancak bu ilkini tıkladığımda, sınıfın tamamlandığını eklediğini görebilirsiniz.
Ve sonra tekrar tıklayın ve gider.
Şimdi sadece sınıfı tanımlamamız lazım.
Şimdi bunu yapalım.
Yüce saygıdeğer
ve yeni bir dosya hazırlayacağım ve bu işi Cs'lere yapacağım gibi yapacağım ve yaptığımız ilk şey, sınıfımızı tanımlamak.
Metin dekorasyonuyla yaptığımız bir vuruş efekti
vereceğim ve bu çizgiyi ayarladık ve opaklığın da 0 olacağı şekilde opaklığı değiştirdik. 5 ve kaydetmek.
dosyalamak için yaşlandık, Due'nun bize gutsiest ve biz kaydedebiliriz.
Ve tabii ki bunu değerlendirmeye başlamak için ona bağlamanız gerekiyor ya da onlarla
Şimdi onu test edelim.
Sayfayı yeniliyorsun.
Ben havada kaldım.
Bu yüzden, siyah ve yeşil rengi değiştiren iki olay var.
Ve şimdi tıklayabilir ve üstü çizili bir efekt elde ederiz.
Ve bu çizgi de geçer.
manuel olarak değiştirmek yerine birincisi.
Yapacağımız bazı küçük değişiklikler var Ancak, javascript dosyamıza geri dönersek, birincisi rengi
Yeşil ve siyah olacak şekilde değiştiriliyor.
Bence kendi sınıfımızla yapmak daha iyi.
Bu yüzden yeni bir sınıf yapacağım
ve bunu seçilmiş olarak arayacağım ve sonra ne zaman seçileceğini söyleyeceğim metin veya renk bunun gibi yeşil olmalı.
Ve sonra Javascript'le birlikte gideceğiz.
Ve biz yapmak istediğimizin üzerine fare tıkladığınızda, bu sınıf listesinin seçili olduğunu eklersin deyim.
açmak için javascript kullanabiliyoruz ve SAS aslında stilin sorumluluğunu üstleniyor.
Ve bu, endişeler arasındaki ayrıma geri dönüyor; fikrimiz,
javascript'imizin bireysel stilleri manipüle etmesini istemiyoruz, aksine CSS'lerimizin bölümlerini
Bu yüzden üzerine geldiğimizde ve üzerine
geldiğimizde sınıfı seçeceğiz ya da karışıklık duyduğumuzda bu aptal sınıf listesini kaldırmayı seçeceğiz ve yenilemeyi kaydettiğimizde oldukça iyi göründüğünü göreceksin.
Tıklayın, vuruşumuzu alalım.
Tamam.
Yapılması gereken küçük bir liste var.
Bu, bunu yapmanın biraz daha güzel bir yoludur.
İşlevsel olarak aynı görünüyor.
Bir seferde bir tane stil ekleyip düzeltmek yerine sınıfları kullanmak daha iyi bir uygulamadır.
Özetlemek için iki yeni olay mouseover ve fareyi gördük.
Ayrıca, bu anahtar kelimeyi kullandığımız bir döngü yerine etkinlikler oluşturan daha pratik bazı uygulamalarımız da var