Event Handling

Events…what are they and how do we handle them? Events are things that your end user does…clicks on something, hovers their mouse over a section of the page or even loads the page. Events allow our JavaScript functionality program work with the user to create a truly interactive experience. So how does it work? At their most basic level, they are HTML attributes. Here is an example…

[code lang=”html”]

<body onload="someFunction();">

<!– Some HTML goodness…–>

</body>

[/code]

As you can see from the example above, we are using an HTML attribute (in this case onload) to run a function. So someFunction() will run when the page loads. There are a lot of events…

  • onclick
  • onmouseover
  • onmouseout
…and tons more.  Here is a list of them…

 

HTML Events

Having HTML attributes makes wiring up our JavaScript functionality into our HTML easy. We simply have to place our function call in whatever event we want to trigger it. Is it ideal though? The problem with doing this is it violates the concept of separation of concerns. We do not want to commingle our content (HTML) with our functionality (JavaScript). A solution is to assign the function reference to the event within our JavaScript code. So instead of putting someFunction() in our onload attribute, we can do this…

[code lang=”js”]
// Attach a function to the onload event window.onload = someFunction();
[/code]

So we can ‘wire up’ our HTML events without even going into the HTML! You can do this for all the events. Frameworks, such as jQuery make this stuff even easier and less verbose. I will save those topics for when I cover some jQuery stuff though.

Now, there is an issue with the way I did it. We cannot pass arguments this way. This is where function literals come into play. I will save that topic for a future post..coming soon. How’s that for a teaser?

Happy Coding!

Clay Hess

More To Explore

Code

Exploring the Broadcast Channel API: Inter-Tab Communication

Intercommunication between different contexts (like tabs, iframes or workers) of the same origin has often been a challenge. With the Broadcast Channel API, developers now have a powerful tool to easily communicate between browsing contexts. In this blog post, we’ll dive deep into the capabilities of the Broadcast Channel API, exploring its features, use cases, and how it can be effectively implemented in your projects.

computer, laptop, work place-2982270.jpg
Code

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.