Web Front-End Development Week 3: DOM Events Events A browser event is when something happens on a web page, an event occurs on an object in the DOM • User interaction events occur when a user interacts with the browser’s UI o load • Keyboard events occur when a user interacts with the keyboard o keydown • Mouse events occur when a user interacts with a mouse, trackpad, or touch screen o click • Focus events occur when an element games or loses focus o focus • Form events occur when a user interacts with a form element o submit When an event has occurred, we say the event was fired When an event has fired you can use JavaScript to handle the event 1. Select the element you want to respond to 2. Specify which event on the element you want to respond to 3. Call the code you want to run when the event occurs Listeners Event listeners are the best approach to handling events. • HTML event handlers where the event is mixed in with the HTML is an old way to attach events but it’s not good practice to mix HTML and JavaScript • Traditional DOM event handlers are better but can only attach a single function to an event. Event listeners using addEventListener() is the preferred approach and the only one you should be using. • Can handle multiple functions and events on one element • Older browsers and IE 5-8 did not support addEventListener() You can read about the workarounds in the book Event listeners need to access objects in the DOM so the whole web page has to be loaded first. Examples: • starwarseventlistener1.html (click on star wars image) o element.addEventListener(‘event’, functionName, event flow); o Event names don’t need to precede with ‘on’ o No parentheses after the function name § When the interpreter sees the parens after a function call it runs the function right away. § In an event handler you want to wait until the event triggers it. o The javascript is at the bottom of the page to ensure that the page has loaded first so the id ‘logo’ can be found in the DOM • starwarseventlistener2.html o 2 images change, 1 function for each o These two functions do the same general task o Whenever you find yourself writing multiple functions that are similar there might be a better way to structure them o Can you think of a way to implement these by generalizing these functions? Aileen Pierce Web Front-End Development 9/11/2017 1 When designing a program you should think about the high-level functionality and abstracting as much of the functionality as possible. • Use functions to create modular code • Put functions in an external file so they can easily be linked to from multiple pages • Create high level functions that are reusable o Use parameters for data the functions need instead of hard coding data in the function Example: • starwarseventlistenerparams.html o If the function takes parameters you can’t just put them in the function call in an event listener o You have to wrap the function call in an anonymous function so the interpreter won’t run the function right away it will just set up the event listener HTML Forms The most common way to get user input on the web is through HTML forms. Today we’ll focus on HTML forms and how to use JavaScript to access the data. Later in the semester we’ll use jQuery to make forms interactive and process the data by incorporating a server. • Forms group together controls • All controls must be within <form> </form> tags • Each form element is stored as an object • The input object can generate several elements o type specifies the type of element o name allows you to name the element o id allows you to give each element a unique id Text field and text areas Text fields handle one line of text. Text areas are similar to a text box but can contain multiple lines Check Boxes Check boxes allow a user to choose from a group of options • Each check box is independent • Users can check as many check boxes as they want Radio Buttons Radio buttons allow a user to pick one choice from a group of options. • Each button has an id that must be unique • Radio buttons are grouped by the name attribute so only one can be chosen at a time Select/List Boxes A select, or list, box lets the user chose from a list of options. Good choice if there are a lot of choices(state) Buttons Buttons usually trigger an action when clicked. Use an event listener to listen for the click event to call a function to process the form. Aileen Pierce Web Front-End Development 9/11/2017 2 Example: • Pac-12 season tickets (form_select.html) o text field § id specifies the id of the text field § value specifies the text that the text box initially contains (optional) § size determines the size of the text box in number of characters (optional) o checkboxes § A label for the check box needs to be done separately in HTML § Property "checked" is true or false o radio § Radio buttons are grouped by name so only one can be chosen at a time § Each id must be unique § The value of the button is stored in value § checked stores if the button is checked • true for the chosen button • false for the ones not chosen o select § The select object creates a drop down list box § The select object is a container for a series of option objects § Each option object has a value property that stores the value of the selected option. o button § type describes what type of button it is • submit will submit the form to a server • button doesn’t submit the form, we use the event listener to handle the event • reset resets the fields in the form § id is a unique id o text area § The rows and cols values determine the size of the text area (in characters)(optional) § These objects have a value property that you can read and write to o Form formatting § Buttons have text in the tag § For all other form elements use <label> • The for attribute should equal the id attribute of its related element to bind them Lab: Create a web page that uses JavaScript to interact with the DOM in the following ways: • manipulates at least two different DOM properties • responds to at least two different types of events using event listeners(using addEventListener()) Your JavaScript should be in a function in an external js file. Aileen Pierce Web Front-End Development 9/11/2017 3 .