Obsługa zdarzeń #2

Fragment kodu do warsztatu #2

<article>
  <header>Metoda stopPropagtion()<hr/></header>
  <p>Obczaj najnowszy trailer filmu Deadloop 3 !!!</p>
  <button>► Odtwarzaj wideo</button>
  <section>
    <div>
      <span>►</span>
    </div>
  </section>
</article>

Podstawowy kod CSS (do umieszczenia w nagłówku dokumentu):

button {
	border: solid 2px blue;
	backgroud: white;
}
section {
	background: grey;
	color: white;
	display: none;
	padding: 1rem;
}
section > div {
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	height: 240px;
	width: 320px;
}
div > span { cursor: pointer; font-size: 300%; }
a > span {
	background: green;
	border-radius: 50%;
	color: white;
	padding: 0 .5rem;
}

Przydatne metody i obiekty:

// obiekty:
document.*
// metody:
querySelector( selektor )
addEventListener( zdarzenie, funkcja )
stopPropagation()
// właściwości:
*.target
*.parentNode
*.textContent

Kroki implementacji mechanizmu:

• Wyszukaj węzeł button i dodaj obsługę zdarzenia click dla metody wyświetlenia odtwarzacza openPlayer()

• Wyszukaj szary węzeł, dodaj do niego obsługę zdarzenia click dla metody closePlayer() oraz wyświetl węzeł

• Wyszukaj szary węzeł oraz ukryj ten węzeł

• Wyszukaj węzła z przyciskiem ► i dodaj do niego obsługę zdarzenia click dla metody playVid

• Dla zdarzenia należy wstrzymać propagację oraz ustawić dla kontenera czarnego kolor tła na zielony

<article>
	<header>Metoda preventDefault()<hr/></header>
	<p>Problemy, które może rozwiązać preventDefault:</p>
	<ul>
	  <li>Nie chcemy zapamiętywać w hisorii przeglądania adresu URL wewnętrznego (#doGory)</li>
	  <li>Nie chcemy przypadkowo opuścić strony przekierowaniem z Odnosnika (A HREF)</li>
	  <li>Nie chcemy przeładować dokumentu przesyłając Formularz klasycznym POST-em, zamiast dynamicznie AJAX-em</li>
	</ul>
	<div>
	  <h3>Komentarze</h3>
	  <a href="#supr">Supr <span>0</span></a>
	  <a href="#ok">OK <span>0</span></a>
	  <a href="#lame">Lamee <span>0</span></a>
	  <div>Brak komentarzy</div>
	</div>
	  <h3>Skomentuj artykuł:</h3>
	<footer>
	<form>
	  <label>Autor</label>
	  <input type="text" name="autor" /><br/>
	  <label>Treść</label>
	  <textarea name="tresc"></textarea><br/>
	  <input type="submit" name="dodaj" value="Skomentuj" />
	</form>
	</footer>
</article>

Kroki implementacji mechanizmów:

• Wyszukaj przycisk submit i dodaj dla metody addComment obsługę zdarzenia click

• Odczytaj w metodzie zdarzenie oraz użyj metody wstrzymujacej wykonanie domyślnego działania dla zdarzenia

• Następnie w tej samej metodzie wyszukaj pola formularza autor oraz tresc. Odczytaj ich wartości z atrybutu value i wyświetl w konsoli deweloperskiej

• Wyszukaj wszystkie znaczniki odnosnika A oraz w petli do każdego znacznika dodaj obsługę metody addOne dla zdarenia click

• W metodzie addOne należy zablokować domyślne działanie zdarzenia, następnie wyświetlić w konsoli, na jakim węźle zdarzenie miało miejsce (atrybut target)

• Dalej należy z tego węzła wyszukać najbliższy węzłe A i zapisać go do zmiennej btn oraz wyświetlić ją w konsoli (porównać z atrybutem target)

• Następnie w metodzie na zmiennej btn wyszukać węzeł span i zapisać do zmiennej cnt

• Ze zmiennej cnt odczytać atrybut textContent, dodać do niego wartość liczbową 1 i zapisać spowrotem do tego atrybutu