You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
7 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" dir="ltr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Web app lifecycle</title>
|
||
|
|
<style media="screen">
|
||
|
|
#first { color: green; }
|
||
|
|
#second { color: red; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Mysterious Redirect</h1>
|
||
|
|
<ul id="first">
|
||
|
|
</ul>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function addMessage(element, message){
|
||
|
|
let messageElement = document.createElement("li");
|
||
|
|
messageElement.textContent = message;
|
||
|
|
element.appendChild(messageElement);
|
||
|
|
};
|
||
|
|
|
||
|
|
let first = document.getElementById("first");
|
||
|
|
addMessage(first, "Page loading");
|
||
|
|
</script>
|
||
|
|
<ul id="second">
|
||
|
|
</ul>
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.body.addEventListener("mousemove", function(){
|
||
|
|
let second = document.getElementById("second");
|
||
|
|
addMessage(second, "Event: mousemove");
|
||
|
|
});
|
||
|
|
|
||
|
|
document.body.addEventListener("click", function(){
|
||
|
|
let second = document.getElementById("second");
|
||
|
|
addMessage(second, "Event: click");
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
let headings = document.getElementsByTagName('h1');
|
||
|
|
let heading = headings[0];
|
||
|
|
document.addEventListener('click', function(event){
|
||
|
|
let element = event.target;
|
||
|
|
element.innerHTML = "You clicked me!";
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|