Object-Oriented JavaScript — Event Handling

Object-Oriented JavaScript — Event Handling

Ways to handle events.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at event handling.

Stop Propagation

We can stop events from bubbling up with the stopPropagation method.

If we don’t want events to propagate from the element where the event originated to the document and everything in between, we can write:

const div = document.querySelector('div');
div.addEventListener('click', (e) => {
  e.stopPropagation();
  alert('clicked');
});

e is the event object.

And we can call stopProgation on it so that only the listener for the div will listen to the click event.

Prevent Default Behavior

We can prevent the default behavior of the browser by calling the preventDefault method on it.

For example, if we have the following HTML:

<a href='http://example.com'>click me</a>

We can listen to the click event by writing:

const a = document.querySelector('a');
a.addEventListener('click', (e) => {
  if (!confirm('You sure you want to leave?')) {
    e.preventDefault();
  }
});

We have a confirm function call to show a dialog.

If the user clicks Cancel, then the function returns false and preventDefault will be called.

Once that’s done, then the default action for the a element, which is the go to the URL in the href attribute, will be stopped.

Not all events let us prevent the default behavior, but most do.

If we want to be sure, we can check the cancellable property of the event object.

javascript programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

[ Professor JavaScript ]: Introduction

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Now Learn JavaScript Programming Language With Microsoft

Microsoft has released a new series of video tutorials on YouTube for novice programmers to get a hands-on renowned programming language — JavaScript.