HTML Event Attributes

In this article, we shall discuss in detail about HTML Event Attributes. Events are the actions that are performed as a result of user action. For example, when a user presses a keyboard to read the data, it is said to be keyboard events. These activities are done when a user looks into a website and performs a button click or when a page loads on pressing the refresh button where the browser does manipulation on the pages; all these actions are said to be an event. Here we will go through a basic understanding of events and how it works in the browser on the user actions. There is a different type of events that occur in the entire browser windows which are explained in the following sections.

Top 5 HTML Event Attributes

There is a different variant of events available in the HTML. And all these events have a small block of code named as an event handler that fires when the event action is performed. These are attached to the HTML elements. The event handlers or event listeners play an important role in the HTML event attributes. Let’s see different types of event attributes that are global declared and applied to HTML elements also their work in detail. Four primary event attributes are majorly used. They are:

1. Window Event
2. Form Events
3. Mouse Events
4. Keyboard Events
5. Drag and drop Events

We shall describe all these attributes one by one with an example. First, we will go with.

1. Window Event

• onafterprintEvent: This attribute is supported by all the Html tags and works when a page started printing and has a single value script. Here comes an example of HTML code. This example shows when a button is pressed; it prints a message being printed in a dialog message.

Code:

<title>
Windows onafterprint Event
</title>


<h1 id="Windows-onafterprint-Event">Windows onafterprint Event </h1>
<p>This attribute works in IE and Mozilla</p>

<script>
function myfun() {
alert("Document is being printed");
}
</script>

Output:

• onbeforeprint: It works before printing. The event gets fired after the printing process. Below is the example code.

Code:

<style>
body {
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
}
p {
font-size: 2rem;
}
</style>


<h1 id="Attribute-Demo"> Attribute Demo</h1>
<p style="color:#0000FF;">trigger to print.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "#00BFFF";
}
</script>

Output:

• onerror: This function is triggered when an error is thrown while no element exists.

Code:

<img  src="/static/imghwm/default1.png" data-src="p.jpg" class="lazy" onerror="myFun()" alt="HTML Event Attributes" >
<p>hello world.</p>
<script>
function myFun() {
alert("problem with image loading.");
}
</script>

Output:

• onload: This function helps in loading an object and works well to see if a web page is correctly loaded.

Code:

<title>onload event demo</title>


<img  src="/static/imghwm/default1.png" data-src="pic.jpg" class="lazy" onload="ldImg()"    style="max-width:90%"  style="max-width:90%" alt="HTML Event Attributes" >
<script>
function ldImg() {
alert("image loaded without error");
}
</script>

Output:

• onresize: This event is triggered when the browser window is resized, and any element can be triggered under the resize attribute.

Code:

<title>onresize event</title>


<script type="text/javascript">
function cmg() {
alert('welcome to educba');
}
window.onresize = cmg;
</script>


<input type="button" value="Click the button" onclick="alert(window.onresize);">

Output:

• onunload: This event is triggered when a web page window is closed or when a user leaves the webpage. The below code unloads the page when a user leaves and throws an alert thanks for searching. This event sometimes works in all browsers.

Code:

<h1 id="Welcometo-educba-tutorial">Welcometo educba tutorial</h1>
<p>Leave the page .</p>
<script>
function onfunc() {
alert("Thank you for searching!");
}
</script>

Output:

2. Form Events

It works with form Controls. The following are the attributes that occur when the user interacting with the browsers.

• onblur: This event occurs when the user’s attention is away from the form window. The following example takes input in the lower case, and when the submit button is clicked, it turns the output into the Upper case.

Code:

<title> Form onblur </title>
<style>
body {
text-align:center;
}
h1 {
color:pink;
}
</style>


<h1 id="EDUCBA">EDUCBA</h1>
<input type="text" name="fname" id="aaa" onblur="myfunc()">
<button type="button">Submit</button>
<script>
function myfunc() {
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
}
</script>

Output:

• onchange: This event occurs when a user changes the existing element in the form. It happens when an element loses focus.

Code:

<meta charset="utf-8">
<title>HTML onchange</title>

 
select the dress color pink Yellow White

Note: Select any option

Describe yourself in short :   
  
Submit

Output:

• onfocus: This attribute is enabled when the user gives attention to the element on a web page or when input is focussed. The below example highlights when we enter an input in the field.

Code:

<p>This event gets triggered whwn an element is been focussed.</p>
Name: <input type="text" id="name" onfocus="onfoc(this.id)"><br>
Location: <input type="text" id="loc" onfocus="onfoc(this.id)">
<script>
function onfoc(a) {
document.getElementById(a).style.background = "pink";
}
</script>

Output:

• oninput: This event triggers when the input is entered in the input field. It has been activated when the value in the text field is changed. It reflects once the value of the element is changed.

<title> HTML oninput </title>

<style>
body {
text-align:center;
}
h1 {
color:red;
}
</style>

<h1 id="Event-Attribute"> Event Attribute </h1>
Enter the text:
<input type="text" id="EDUCBA" oninput="myon()">
<p id="sid"></p>
<script>
function myon()
{
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
}
</script>

Output:

• oninvalid: This attribute calls the events when the text entered in the input type is invalid or remains empty. This event attribute must fill the input element.

Code:

<title> example oninvalid Event </title>
<style>
p {
color:orange;
}
body {
text-align:center;
}
</style>     

<p> HTML is used to create a web page</p>

Enter the name:

 

Output:

• onreset: It is fired when a form is a rest. The following example says when you submit the button, a form is processed, and again when you click to reset, the form is being reset.

Code:

<style>
body {font-family:calibri;}
label {font-variant:small-caps;}
ol {background-color:#610000; margin-top:35px;}
li {margin-top:3px; padding:3px; background-color:rose; font-size:15px;}
div {position:absolute;top:250px;left:70px; font-size:1.5em;
}
</style>

<ol>
<li>Form with input to reset and submit</li>
</ol>

Enter input:

<script> function onInva() { alert("Input field cannot be empty!"); } function onInp() { var input_value = document.getElementById("iv").value; document.getElementById("a_box").innerHTML = "Input value: <br />" + iv; } function onRes() { alert("form is reset!"); } function onSubmitEvent() { alert("Form is loading"); location.reload(); } </script>

Output:

• onsearch: It works when a user presses an enter button.

Code:

<p>Write in the field.</p>&gt
<input type="search" id="value1" onsearch="myF()">
<p id="sample"></p>
<script>
function myF() {
var k = document.getElementById("value1");
document.getElementById("sample").innerHTML = "search element is: " + k.value;
}
</script>

Output:

• onselect: It is triggered when a text has been selected in an input box. It throws a dialog box printing an alert message.

Code:

<title>onselect demo</title>
<style>
h1 {
color:magenta;
}
body {
text-align:center;
}
</style>
<script>
function eduhtml() {
alert("text highlighted!");
}
</script>


<h1 id="EDUCBA-Online-tutorial">EDUCBA Online tutorial</h1>
Text Box: <input type="text" value="onselectattribute: A well defined portal" onselect="eduhtml()">

The above is the detailed content of HTML Event Attributes. For more information, please follow other related articles on the PHP Chinese website!