Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Things You Should Know About Javascript Events

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 02:23 - Event bubbling</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Some events bubble, some don’t</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Clicks bubble</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Mouseevents bubble</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> Focus doesn’t bubble</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 04:10 - Event capturing</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Capture: down, bubble up</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Canceling: prevent default</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> target` vs currentTarget</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> currentTarget is what got clicked</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> target is what you listened for the click on</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> event.isTrusted</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> addEventListener once: true</li> </ul> <h2 class="code-line" data-line-start="31" data-line-end="32"> <a id="Links_31" name="Links_31"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://javascript30.com/">Javascript30</a></li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href= "https://beginnerjavascript.com/">BeginnerJavascript</a></li> </ul> <h2 class="code-line" data-line-start="35" data-line-end="36"> <a id="Tweet_us_your_tasty_treats_35" name= "Tweet_us_your_tasty_treats_35"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 Show Notes 02:23 - Event bubbling
  Some events bubble, some don’t
 Clicks bubble
 Mouseevents bubble
 Focus doesn’t bubble
  04:10 - Event capturing
  Capture: down, bubble up
 Canceling: prevent default
 target` vs currentTarget
 currentTarget is what got clicked
 target is what you listened for the click on
 event.isTrusted
 addEventListener once: true
  Links  Javascript30

 BeginnerJavascript

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Hasty Treat - Things You Should Know About Javascript Events

Poslechněte si podcast