<!DOCTYPE html>
<html>
<head>
<title>events</title>
<style>
#big_content { border: 1px solid green; height: 2000px; }
html, body { height: 100%; }
</style>
<script>
window.onload = function() {
var div = document.createElement('div');
div.id = 'foobarbaz';
window.setTimeout(function() {
document.body.appendChild(div);
}, 500);
window.setTimeout(function() {
document.body.removeChild(div);
}, 1000);
window.setTimeout(function() {
alert('hello there');
}, 1500);
var input = document.querySelector('input[name="focus"]');
input.addEventListener('focus', function(e) {
alert('focused');
});
input.addEventListener('blur', function(e) {
alert('blurred');
});
document.querySelector('#start_ajax').addEventListener('click', function(e) {
let xhr = new XMLHttpRequest();
xhr.open('GET', window.ajax_url);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
window.setTimeout(function() {
document.querySelector('#ajax_result').innerHTML = 'Hello World';
}, 1000);
}
};
});
document.querySelector('#start_ajax_with_reload').addEventListener('click', function(e) {
let xhr = new XMLHttpRequest();
xhr.open('GET', window.ajax_url);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
window.setTimeout(function() {
console.log('reloading')
window.location.reload(true);
}, 1000);
}
};
});
document.cookie = 'foo=bar; path=/';
}
</script>
</head>
<body>
<h1>Events Header</h1>
<div id="big_content">
<form>
<input name="focus" value="1" />
</form>
</div>
<button id="start_ajax">Start AJAX</button>
<button id="start_ajax_with_reload">Start AJAX with page reload</button>
<div id="ajax_result"></div>
</body>
</html>