JavaScript Events and Linking Functions to Elements
Explore the world of JavaScript events, learn how to link functions to elements, and understand the concept of action listeners in JavaScript development. This comprehensive guide covers everything from event bubbling to creating custom events and different types of events in HTML DOM.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
JavaScript Events David Carr & Travis Clodfelter Jr.
Linking JavaScript functions to elements Linking JS files adding action listeners
Linking JS functions to elements: files Similar to <link> tag In CSS Opening and closing tag required :<script type="text JavaScript"> & </script> To include external file add a src attribute: src="path-to-javascript- file.js" <script type="text/JavaScript" src="path-to-javascript- file.js"></script> Some devs place the link at the end for better performance
Linking JS functions to elements: actionListener Bubbling: inner most elements event Capturing: outer most elements event You can add more than one listener to a single element removeEventListener() addEventlistener() method attaches an event handler to an element getElementByID(), getElementByClassName(), get ElementByTagName() Element.addEventListener(even t, function) Third parameter(optional)= event bubbling or capturing
const event = new Event("build"); const event = new Event("build"); Synthetic Events In JavaScript, there is the option to create new events These custom Events are objects which respond to occurrences in the browser or server tasks Interfaces are built on the parent Event, and there are many types already defined Fullscreen Animation Server-sent Events can be made with the constructor as follows: const event = new Event( build );
Types of Events onClick onDblClick onMouseOver onFocus onBlur onLoad onMouseOver onMouseOut onKeyDown onUnload onChange HTML DOM Event Object (w3schools.com)
Demonstration from Websites http://web.simmons.edu/~grabiner/comm244/weeknine/basic- javascript-example.html Drum Kit (nenalukic.github.io) http://liouh.com/jsevents/
Further Readings Understanding JavaScript event-based interactions Static analysis of event-driven Node.js JavaScript applications
Sources Introduction to events - Learn web development | MDN (mozilla.org) Event - Web APIs | MDN (mozilla.org) JavaScript Events (w3schools.com)
