DOM Events

Just a simple exercise. Whatever you do, do not click on the button!

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Events - teachMeJavascript</title>
</head>
<body>
<h2>DOM Events</h2>
<p>blah blah blah</p>
<button>Don't Click Me!!</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
var button = document.querySelector("button");
var h2 = document.querySelector("h2");
var isH2 = false;
//Setup click listener
button.addEventListener("click", function(){
if(isH2) {
h2.textContent = "DOM Events";
} else {
h2.textContent = "I knew you couldn't resist!!"
}
isH2 = !isH2;
});

Common Methods of DOM

  • onclick
  • onmouseenter
  • onkeydown
  • onkeypress
  • onload
  • onscroll
  • onblur
  • ondrag
  • oncopy
  • oncut
  • onpaste

More on DOM Events: