أحداث form في لغة جافا سكريبتJavaScript Form Events

<input type="text" class="input" placeholder="Enter Username" onchange="this.style.border='1px solid #55efc4'">

let input = document.getElementById("input");
input.onchange = function(){
  input.style.border='1px solid #55efc4'
};

let input = document.getElementById("input");
input.addEventListener('change',()=>{
   input.style.border='1px solid #55efc4'
});

<input type="text" class="input" placeholder="Enter Username" onchange="alert('onchange')" onblur="alert('onblur')">

input.onblur = function(){
  input.style.border='2px solid red';
}

input.addEventListener('blur',()=>{
   input.style.border='2px solid red'
});

<input type="text" class="input" placeholder="Enter Username" onfocus="this.style.border='2px solid red';">

let input = document.getElementById("input");
input.onfocus = function(){
  input.style.border='1px solid #55efc4';
}

let input = document.getElementById("input");
input.addEventListener('focus',()=>{
   input.style.border='1px solid #55efc4'
});

<form action="" method="post" onsubmit="alert('Data Sent successfully')">
  <input type="text" class="input" placeholder="Enter Username">
  <input class="btn" type="submit">
</form>

form.onsubmit = function(){
  alert('Data Sent successfully')
}

form.addEventListener('submit',()=>{
   alert('Data Sent successfully')
});