Events.md

Events

• Events are let us have these really awesome user interactions on the page
• Show them inception explained(Scroll down is an event)
• When you interact with a webpage what would be some other events?

Selecting an element

• You use the same CSS selector to target that element
• var changeButton = document.querySelector('#change-me')
• We assign the element we selected to a variable to use later

Event listener

• Once we have an element selected, we can then attach an event listener to it
• Says if this element has this event happen on it, then do this stuff.
• In this case we are going to change text on the screen if our button is clicked

Have them guess what happens - Don't Cheat

Have them try - toggle a class on a heading element

• It should change some styling on that element

Values out of an input field

• It is also common to use event handlers to get values out of an input field

Try it user input