CloseTag | الشروحات | Java Script | دوال EventListener في لغة جافا سكريبت | JavaScript DOM EventListener

<!DOCTYPE html>
<html>
<head>
  <title>CloseTag | addEventListener</title>
  <style>
  #myBtn
  {
    Background-color:#007bff;
    color:white;
    padding:10px;
    border:none;
  }
  p
  {
  padding:0px;
  }
  </style>
</head>
<body>
<h1 id="h1">CloseTag addEventListener</h1>
<p id="paragraph">this element will take class color when clicked<p>
<button id="myBtn">Click</button>
<script>
let myBtn = document.getElementById("myBtn");
let h1 = document.getElementById("h1");
let paragraph = document.getElementById("paragraph");
myBtn.addEventListener("mouseover", function(){color()});
myBtn.addEventListener("click", function(){hover()});
myBtn.addEventListener("mouseout", function(){background()});
function color() {
  paragraph.style.color = "blue";
}
function background() {
  paragraph.style.backgroundColor = "orange";
}
function hover() {
  paragraph.style.padding = "10px";
}
</script>
</body>
</html>