Events are changes that occur as a result of the interaction of HTML objects with the user (mouse, keyboard or touch) or Web APIs (video ending, pausing, etc.). It is possible to assign functions to events occurring in the DOM using JavaScript.

In this article, we will explain with examples how JavaScript functions are assigned to events of DOM objects. It is possible to assign events to HTML objects in three ways with JavaScript. Using an event by defining an attribute in the HTML tag Using event by binding to object with addEventListener Use of event as property of object

1.Using Events in HTML Tags It is the oldest used method.

Although I do not recommend it, most of the examples given on the internet are done this way. The full DOM event list is available at the bottom of the page.

Use of

The logic is actually as follows. The javascript code written between quotes is executed when the event indicated in red occurs. Note: Single quotes within double quotes are recognized as textual. The opposite is true for single quotes. Example: When you click on the button, let's write hello world as a warning on the screen. onclick: run the javascript code window.alert('Hello World') when the click occurs. Example: Let's write the code that warns the screen when the text in the input box changes. We will use the onchange event for this. this switch and function usage Function usage: Usually a function is executed when the event occurs. this: Sends the object on which the event occurred as a parameter to the function. Example: Let's prepare the code that prints whether the number entered in the text box is odd or even. This time, the example should be too long to be written within a line. Therefore, it would be more logical to define a function and make the conditions inside the function.

function control(object){
if(object.value%2==0) {
 alert(object.value+" number is even");
 }
 else if(object.value%2==1) {
 alert(object.value+" number is odd");
 } else {
 alert(object.value+" is not a number");
 }

}

Let's examine what we wrote. The onchange attribute runs the control function when the event occurs. We send the active object (input object) to the control function with this. We meet the this key with its name where the control function is defined and perform the necessary condition operation. Example: Let's do the above example by connecting it to a button. Since the active object this time will be the button, we will only send the button with the this key. We will need to use document.getElementById for the text object. For this, we assign an id to the object.

function control(){
var number=document.getElementById('number');

if(number.value%2==0){
alert(number.value+" is even");
}
else if(number.value%2==1){
alert(number.value+" number is odd");
}else{
alert(number.value+" is not a number");
}
}

Or the example can be made more general as follows. We send the number object (using document.getElementById('number')) to the control function.

function check(number){
if(number.value%2==0){
alert(number.value+" is even");
}
else if(number.value%2==1){
alert(number.value+" number is odd");
}else{
alert(number.value+" is not a number");
}
}

2. Using addEventListener by assigning an event to the object

I have explained the addEventListener issue on the site before. Let's explain the use of events by quoting a few quotes from that article that explain the subject. Use of: element.addEventListener(event,function,bubble); event: activity belonging to the tag to be listened to. ex: click, mouseover, keypress, cut, scroll, dragenter etc. Click to see the full event list. Function: The name of the method or anonymous function that will be run when the listened event occurs. Bubbling: If an event is defined in each of the nested tags, whether it will run the correct events from start to finish (returns true/false). Simple usage:

var object= document.getElementById("test1");
object.addEventListener("click",function(e){ alert("hello"); },false);

When the test1 object is clicked, an anonymous function is triggered. Example: Let's prepare the code that prints whether the number entered in the text box is odd or even. We prepare the above example using addEventListener. This was not done in this example, but event-related parameters can be passed to functions that assign events.

var number= document.getElementById('number');
number.addEventListener('change',control,false);

function control(){

if(this.value%2==0){
alert(this.value+" number is even");
}
else if(this.value%2==1){
alert(this.value+" number is odd");
}else{
alert(this.value+" sis not a bear");
}
}

Let's examine what happened in the code above.6. In the line, we selected the HTML tag with a number as the javascript object. In line 9, we connected the control function with the change event to this object with addEventlistener. 11-28. The lines belong to the control function. The most important thing to consider in the control function is to know that the change in the text box is controlled with the this key. All values ​​in text boxes are kept as value. We read the value entered in the text box with this.value and processed it with the condition. Example: Let's do the example above by connecting it to a button. I make the same examples with different techniques to see the difference in usage. This was not done in this example, but event-related parameters can be passed to functions that assign events.

var numberControl= document.getElementById('number-control');
var number= document.getElementById('number');

numberControl.addEventListener('click',control,false);

function control(){
if(number.value%2==0){
alert(number.value+" is even");
}
else if(number.value%2==1){
alert(number.value+" number is odd");
}else{
alert(number.value+" is not a number");
}
}

Example: show the clicked location on the window. This is an example prepared to show the parameter assigned to the event. The event parameter sends information about the event that occurred. In the click event, it indicates which location on the object the mouse clicked on. offsetX indicates the horizontal position, offsetY indicates the vertical position.

window.addEventListener('click',locationShower,false);
functionShowlocation(event){
window.alert(event.offsetX+"\n"+elay.offsetY);
}

3. Using Event as an Object Property

This is the method I often prefer in the JavaScript applications I write. It is the best event recognition technique that can be used to distinguish between JavaScript code and HTML tags. It offers the opportunity to program more cleanly by using the event properties of the object. Use of After the object is created, event assignment is made by connecting a function or an anonymous function to the object's events. If the event is to be removed from the object, the event can be removed by passing a null value to the defined property. Example: Clicking any area in the window

window.onclick=function(event){
window.alert("any field was clicked");
}

An anonymous function was connected to the onclick property of the Window object. The codes in this function will be executed when you click anywhere on the window. Example: Clicking on any area in the window (a method that can also be done by connecting a function)

functionShowlocation(event){
window.alert("clicked somewhere in the window");
}
window.onclick=Showlocation;

Example: When an event-related function is connected to an object, event-related information can be passed as a parameter when running the function. In this example, an event parameter is passed to the function and the location of the clicked location is shown.

functionShowlocation(event){
window.alert(event.offsetX+"\n"+elay.offsetY);
}
window.onclick=Showlocation;

Example: Let's prepare the code that prints whether the number entered in the text box is odd or even. It is also possible to do this by connecting it to features, similar to what we explained in the first two concepts. NOTE:The object must be created after loading the HTML tag. There are various methods for this, but the simplest is to write javascript codes right before the tag.

var number= document.getElementById('number');
number.onchange=control;

function control(){

if(this.value%2==0){
alert(this.value+" number is even");
}
else if(this.value%2==1){
alert(this.value+" number is odd");
}else{
alert(this.value+" is not a number");
}
}

Checking API Events It is possible to find many examples of mouse and keyboard events. In this section, we will examine how to manage events for media objects. Example: Example of playing, stopping and changing the volume setting of the song.mp3 file

var song=document.getElementById("song");
var status=document.getElementById("status");
var play=document.getElementById("play");
var audio=document.getElementById("audio");

//what to do when you press the play buttonplay.onclick=function(){
if(song.paused){
song.play();
play.textContent="pause";
}else{
song.pause();
play.textContent="play";
}
}
//What to do when the range object is changed for sound adjustment
ses.oninput=function(){
song.volume = volume.value/100;
}
//when the song starts playing
song.onplay=function(){
status.innerHTML="Song Started";
}
//when the song starts playing
song.onpause=function(){
status.innerHTML="Song Paused";
}
//updating the range object when the sound is changed from the control
song.onvolumechange=function(){
voice.value=song.volume*100;
}