Fynd Academy

HTML elements can incorporate event handler attributes that execute JavaScript code. You can use either single or double quotes to specify JavaScript code within these attributes:

Single quotes: <element event='some JavaScript'>
Double quotes: <element event="some JavaScript">

Practical Example

For instance, you can add an onclick attribute with code to a <button> element, enabling actions when the button is clicked.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

In the examples mentioned, JavaScript interacts with HTML elements by modifying their content based on events:

Changing Content of Specific Element: The JavaScript code targets and changes the content of an element identified by its id, such as id="demo".
Modifying Own Element Content: In another scenario, the JavaScript code affects the content of the element that triggered the event, using this.innerHTML to alter its own displayed content. This method allows the element to update itself in response to user interactions.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

JavaScript code is often several lines long. It is more common to see event attributes calling functions:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>

<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Common HTML Events

Below are several typical HTML events:

onchange: Triggered when an HTML element is changed.
onclick: Occurs when an HTML element is clicked.
onmouseover: Activated when the mouse is moved over an HTML element.
onmouseout: Happens when the mouse is moved away from an HTML element.
onkeydown: Occurs when a user presses a keyboard key.
onload: The browser completes loading the page.

JavaScript Event Handlers

Event handlers in JavaScript are crucial for interacting with user input, user actions, and browser actions. They are used in various scenarios:

Executing actions each time a page loads.
Performing tasks when the page is closed.
Responding to user button clicks.
Validating content when users input data.

Methods for Handling Events

JavaScript can interact with events in several ways:

HTML event attributes can directly execute JavaScript code.
HTML event attributes can invoke JavaScript functions.
Custom event handler functions can be assigned to HTML elements.
Events can be prevented from being sent or handled.

These capabilities allow JavaScript to offer a flexible and robust environment for managing HTML events effectively.

Take a look into your desired course