Events in JavaScript - ProgrammerTech
Language:

Search

Events in JavaScript

  • Share this:
Events in JavaScript

The concept of Events and AddEvenListener

Events are actions that occur in the browser that are initiated by the user or the browser. Our lesson today is one of the most important lessons, so we advise you to review it several times to understand more. We will use two methods, the first via functions and the second via classes.

 

Events in JavaScript

  1. When the element is clicked we use onclick.
  2. When changing the element we use onchange.
  3. When the mouse is on the element we use the onmouseover.
  4. When the mouse is away from the onmouseout element.
  5. When using the keyboard we use onkeydown.
  6. When loading the page we use onload.

 

Using onclick in javascript events

The onclick property is used with events in JavaScript, meaning that when a button or associated word is clicked, an event is executed.

example 1

We create a button in the html file

<button onclick="change_background()">change background</button>

javascript file

function change_background(){
	document.getElementById("body").style.background = "red";
}

In the javascript file, we created a function called change_background(). In the html file, we created a button with the name change background and gave it the onclick property, and we put the change_background function for the button so that when you click on it, the commands in the javascript file will be executed. And we set the id of the page body to execute the commands in the body and we gave it the color red. And here when you press the button directly, the background will change to the color we gave to the id in the javascript. In the browser, when we press the button, the background will change directly to red.

 

onmouseover element in javascript

The onmouseover is used when the mouse pointer is over the element and the event is executed directly.

Example 2

html file.

<button onmouseover="change_background()">تغييرالخلفية</button>

javascript file.

function change_background(){
	document.getElementById("body").style.background = "red";
}

In this example, when the mouse pointer approaches the button only when it is directly above the button, the commands will be executed, which is to change the wallpaper.

 

onmouseout element in javascript

The onmouseout event in JavaScript takes place when the mouse pointer is moved away from the element. Mostly this event is used alongside the onmouseover event which occurs when the pointer is moved on an element.

example 3

html file.

<button onmouseout="change_background()">تغييرالخلفية</button>

javascript file.

function change_background(){
	document.getElementById("body").style.background = "red";
}

Events will be executed at the moment the mouse pointer is away from the element i.e. the button, when the pointer approaches the button nothing will be done, but when the pointer is moved away, the commands will be executed.

 

onkeydown element in javascript

Onkeydown is used when you press any button on the keyboard, that is, as soon as you press any button on the keyboard, the commands will be executed.

Example 4

html file.

<button onmouseout="change_background()">change background</button>
<input type="text" onkeydown="change_background()">

Here the background will change as soon as you press the keyboard and type anything in the input field.

 

onload element in javascript

The onload event occurs when the page is being refreshed. The onload event is often used inside the body tag. The onload event can also be used to handle cookies.

function change_background(){
	document.getElementById("body").style.background = "red";
alert("onload It works successfully");
}
window.onload = change_background();

Here the background will change when the page is refreshed and an alert appears saying onload is working successfully.

 

onchange element in javascript

The onchange event is often used to validate input. Sometimes you want when the user selects an option within the select option.

Example 5

html file.

<button id="button">change background</button>

javascript file.

class Home{
	constructor(){
		this.change_background();
		var button = document.getElementById("button");
		button.addEventListener("click", () =>{
			this.change_background();
		});
	}
	change_background(){
		document.getElementById("body").style.background = "red";
	}
}
onload = new Home();

We created a class named Home and within this class the constractor element should be. And to make it work, we put onload = new Home(); And we asked him to run the class Home. And we put a method called change_background() and within the curly brackets we put the run commands for it if this method is running.

We are going to change the background and put it in the run command:

document.getElementById("body").style.background = "red";

And to make it work we added this.change_background(); to run it directly. But we want it if we click on one of the elements, and we wrote in the html page a button element as follows.

<button id="button">change background</button>

To specify button within javascript we put it in a var variable and then define the variable as button.addEventListener . And we put it in parentheses click ie when we click on it, after that we create parentheses and put a flag => and give it the method we want to run with this. The this host allows us to access class elements outside the Constructor (eg methods, variables, etc.).


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com