Javascript event listener

Introduction to Events

Define how your program should react

In JavaScript, events are actions or occurrences that happen in the browser, such as a button click, mouse movement, or keyboard input. Events allow you to respond and execute code based on user interactions. By attaching event listeners to specific HTML elements, you can define how your program should react when these events occur.

List of JavaScript Events

click

The click event occurs when an element is clicked by the user using the mouse or keyboard.

Example: document.getElementById("myButton").addEventListener("click", function() { alert("Button clicked!"); });

Learn more: MDN Click Event

mouseover

The mouseover event occurs when the user moves the mouse pointer over an element.

Example: document.getElementById("myElement").addEventListener("mouseover", function() { console.log("Mouse over element!"); });

Learn more: MDN Mouseover Event

keydown

The keydown event occurs when a key is pressed down.

Example: document.addEventListener("keydown", function(event) { console.log("Key pressed: " + event.key); });

Learn more: MDN Keydown Event

Changing Content on Click

Using the onclick Attribute

You can use the onclick attribute to directly assign a JavaScript function to be executed when an element is clicked. Here's an example:

<p onclick="changeText()">Click me!</p>

<script>
function changeText() {
    document.getElementById("myParagraph").textContent = "Text changed!";
}
</script>

Using the addEventListener Method

Alternatively, you can use the addEventListener method to attach an event listener to an element. Here's an example:

<p id="myClickableParagraph">Click me!</p>

<script>
document.getElementById("myClickableParagraph").addEventListener("click", function() {
    document.getElementById("myParagraph").textContent = "Text changed!";
});
</script>

Difference between innerHTML and textContent

It's important to note the difference between using innerHTML and textContent . While both can be used to change the content of an element, they have different behaviors.

The innerHTML property allows you to set or retrieve the HTML content inside an element, including any nested elements and their HTML structure. On the other hand, the textContent property sets or retrieves only the text content of an element, excluding any HTML tags.

For example, if you have an element with the following HTML: <p id="myElement">Hello <strong>world</strong>!</p>

Using innerHTML :

document.getElementById("myElement").innerHTML = "Hi <em>there</em>!";
// Resulting HTML: <p id="myElement">Hi <em>there</em>!</p>

Using textContent :

document.getElementById("myElement").textContent = "Hi <em>there</em>!";
// Resulting HTML: <p id="myElement">Hi &lt;em&gt;there&lt;/em&gt;!</p>

As you can see, when using innerHTML , the value is treated as HTML markup, allowing for the inclusion of tags. However, when using textContent , the value is treated as plain text, even if HTML tags are included.

It's important to be cautious when using innerHTML as it may lead to unintended effects and potential security vulnerabilities, such as cross-site scripting (XSS) attacks. It's recommended to use textContent whenever possible, especially when dealing with user-generated content.

Removing event listener and callback functions

Using Callback Functions

In JavaScript, you can use callback functions with event listeners to perform actions when an event occurs. A callback function is a function that is passed as an argument to another function and is executed when a certain event takes place. In the context of event listeners, the callback function will be triggered when the specified event occurs.

Here's an example that uses a callback function to change the text when a button is clicked:

<button id="myButton">Click me!</button>

<script>
function changeText() {
    document.getElementById("myParagraph").textContent = "Text changed!";
}

document.getElementById("myButton").addEventListener("click", changeText);
</script>

In this example, the changeText function is the callback function that is executed when the button is clicked. It changes the text content of the paragraph element with the id "myParagraph" to "Text changed!".

Removing Event Listeners

It's important to remove event listeners when they are no longer needed to avoid potential memory leaks or unwanted behavior. To remove an event listener, you can use the removeEventListener method.

Here's an example of how to remove an event listener using the same button from the previous example:

const button = document.getElementById("myButton");

function changeText() {
    document.getElementById("myParagraph").textContent = "Text changed!";
}

button.addEventListener("click", changeText);

// Later, when you want to remove the event listener
button.removeEventListener("click", changeText);

It's important to note that when removing an event listener, the callback function passed to addEventListener must be the exact same function that was originally registered. If you're using an anonymous function as the callback, you won't be able to remove the event listener later. In such cases, it's recommended to store the callback function in a variable so that it can be referenced when removing the listener.