Event attributes are used in JavaScript to associate JavaScript code with HTML elements, which allows you to define how the element should respond to certain events, such as user interactions ( e.g., clicks, keypresses, mouseovers).
Event Attributes typically begin with “on” followed by the event name and JavaScript code as their values. We have various Event Attributes, below are some common Event Attributes;
- ‘onload’:Executes JavaScripts after the page finished loading.
Example:
<img src=”image.jpg” onload=”imageLoaded()”>
2. ‘onClick’: Executes JavaScript when the element is clicked.
Example:
<button type=”button” onClick=”document.getElementById(‘whitecar’).src=’redcar.jpg'”>Redcar</button>
3. ‘onmouseover’: Executes JavaScript when the mouse pointer is moved over the element.
Example:
<img src=”image.jpg” onmouseover=”showDescription()”>
4. ‘onmouseout’: Executes JavaScript when the mouse pointer leaves the element.
5. ‘onkeydown’: Executes JavaScript when the mouse pointer
6. ‘onunload’: Executes JavaScript when the user navigates away from the page.
<body onLoad=”alert(‘welcome to my first JavaScript Assignment, Please click OK to proceed’)”>
7. ‘oninput’: Executes JavaScript when element gets user input.
8. ‘onreset’ : Executes JavaScript when the reset button is clicked on.
9. ‘onsearch’
10. ‘onblur’ : Executes JavaScript the moment that the element loses focus.
These event attributes allow you to define event handlers, which are JavaScript functions that specify what should happen when the associated event occurs.
You can also add event listeners using JavaScript code, which is a more flexible and recommended approach for handling events, especially when working with complex event interactions.
