Tuesday , 18 June 2019
Home / Tag Archives: events

Tag Archives: events

Audio – Advanced JavaScript Tutorial


The video and audio objects both have the same events, properties and methods. So, you already know how to use most of things in the audio object. However, there are a couple of key differences when it comes to formats. Audio Tags To add audio into your document, then you use the <audio> tags like so. [crayon-5d08715e1d3ff203630819/] Like last time, …

Read More »

Video Events – Advanced JavaScript Tutorial

Video Events

Video events allow you to tap into what’s currently happening with the video. There are a couple of video events, but we’ll only go over the more common ones. Let’s update our <body> tags to this. [crayon-5d08715e21d73979209555/] We added a button and a place to display the duration and the current time of the video. Let’s update our script to this. …

Read More »

Text Fields – Advanced JavaScript Tutorial

Text Fields

In this tutorial, we’ll focus on text fields in our forms. There a couple of events, properties and methods to make working with forms easier. Selecting Text Let’s update our document to this. [crayon-5d08715e2314a256725103/] Alright, let’s clear out our script and add this bit of code. [crayon-5d08715e2317e267523567/] In our third line, we use a method called select(). This method will …

Read More »

Form Events – Advanced JavaScript Tutorial

Form Events

If you’ve seen my JavaScript tutorial series, then you already know how to work with forms. In this tutorial, we’ll talk a little more about form events  and how to manipulate them with JavaScript. Setting Up The Document Let’s update the body tags to this. [crayon-5d08715e24b75999815554/] We just have a basic form with some input fields. You should remember that …

Read More »

Event Management – Advanced JavaScript Tutorial

Event Management

This tutorial is based around event management. Just like anything else, creating events takes up memory. Creating multiple events can really slow the performance of your website. Let’s take a look at a couple of ways to still have all the events you want while still keeping your site running in tip top shape! Let’s update the body tags in …

Read More »

Device Events – Advanced JavaScript Tutorial

Device Events

Smartphones and tablets are devices that are frequently used to browse websites. JavaScript now has a couple of events for hand held devices.  For this tutorial, you’ll need to have a mobile phone. I’ll be using the Iphone for this tutorial. Feel free to skip this tutorial if you don’t have a device handy. Orientation The orientationchange event fires when …

Read More »

Keyboard Events – Advanced JavaScript Tutorial

Keyboard Events

It’s time to take a look at keyboard events. Another popular feature of JavaScript is the capability to detect which keys were pressed and how they were pressed. Let’s first update our document to this. [crayon-5d08715e27554555705789/] Sweet! Now, let’s clear up the script and add this bit of code. [crayon-5d08715e27566291481025/] The first kind of event is the keydown event. This …

Read More »

Mouse Events – Advanced JavaScript Tutorial

Mouse Events

Keep track of how the mouse interacts with the web page. It is the primary device for navigation after all. Whenever mouse events occur, you’re passed in a lot of information as to where the mouse is located or what is also happening with the mouse. Let’s take a look at how this works. Coordinates We’re going to keep our …

Read More »

UI Events – Advanced JavaScript Tutorial

UI Events

UI events are events that aren’t specific to the document, but the window object. These events fire when something happens to the browser or window. Loading Events Loading events fire when the window has loaded all scripts, images, files and styles. There are also unloading events for when the user leaves the page. Update your document to this. [crayon-5d08715e28b0a945209043/] Let’s …

Read More »

Event Object – Advanced JavaScript Tutorial

Event Object

The event object is passed into your function whenever an event occurs. This object contains information about the event and even allows you to change how the event phases flow. We’ll be working with our previous example. Update your script to this. [crayon-5d08715e294c3182923495/] Our functions have been updated so that we can reference the event object. The event parameter will …

Read More »