Skip to content

Instantly share code, notes, and snippets.

@OlehRovenskyi

OlehRovenskyi/index.html

Last active June 26, 2017 20:00
Show Gist options
  • Save OlehRovenskyi/a1ba235a3a57c198a717ee2f653b5593 to your computer and use it in GitHub Desktop.
Save OlehRovenskyi/a1ba235a3a57c198a717ee2f653b5593 to your computer and use it in GitHub Desktop.
Download ZIP
events-closure
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form, form p, form div {
margin: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- Events -->
<div id="demo"></div>
<button id="button">Click me</button>
<!-- End Events -->
<!-- Bubbling and Capturing-->
<!--Bubbling -->
<h1>Bubbling</h1>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
<!--event.target -->
<h1>event.target</h1>
<form id="form2">FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
var form = document.getElementById('form2');
form.onclick = function(event) {
event.target.style.backgroundColor = 'yellow';
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = '';
};
</script>
<!-- Capturing -->
<!--<h1>Capturing</h1>-->
<!--<form id="form4">FORM-->
<!--<div>DI3-->
<!--<p>P</p>-->
<!--</div>-->
<!--</form>-->
<!--<script>-->
<!--var elems = document.querySelectorAll('form,div,p');-->
<!--for (var i = 0; i < elems.length; i++) {-->
<!--elems[i].addEventListener("click", highlightThis, true);-->
<!--}-->
<!--function highlightThis() {-->
<!--this.style.backgroundColor = 'yellow';-->
<!--alert(this.tagName);-->
<!--this.style.backgroundColor = '';-->
<!--}-->
<!--</script>-->
<!-- End Bubbling and Capturing-->
<!-- Closure -->
<h1>Closure</h1>
<button id="button0">button 1</button>
<button id="button1">button 2</button>
<button id="button2">button 3</button>
<!-- End Closure -->
<script src="main.js"></script>
</body>
</html>
Raw
main.js
// ---------------------------------
// events
// ---------------------------------
// ---- Start events
(function () {
// 1 variant
var button = document.getElementById('button');
button.onclick = function() {
console.log( 'on click' );
};
// 2 variant
var button = document.getElementById('button');
button.addEventListener('click', myFunction);
function myFunction() {
console.log('click');
document.getElementById("demo").innerHTML = "YOU CLICKED BUTTON!";
}
button.removeEventListener("click", myFunction); // remove the event handler
})();
// ---------------------------------
// lexical scoping
// ---------------------------------
function init() {
var name = "Mozilla";
function displayName() {
alert(name);
}
displayName();
}
init();
function init2() {
var name = 'Mozilla';
function displayName(name) {
console.log(name);
}
displayName('Arni'); // ???
displayName(); // ???
}
init2();
// ---------------------------------
// closure
// ---------------------------------
// ---- почему к name есть доступ?
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
// ---- closure and scope
function makeShout() {
var phrase = "Hi!";
var shout = function() {
console.log(phrase);
};
phrase = "Done!";
return shout;
}
makeShout()(); // ???
// ---- closure and save scope
var firstFunc = function () {
var index = 5;
return function() {
return index;
};
};
var secondFunc = function() {
var index = 15;
console.log( firstFunc()() );
};
secondFunc(); // ???
// ---- closure and events
window.onload = function(){
function t() {
for (var i = 0; i < 3; i++) {
document.getElementById('button' + i).onclick = function() {
console.log('-----', i);
};
}
}
t();
};
// Fix
// 1 variant
window.onload = function(){
function t() {
for (var i = 0; i < 3; i++) {
(function() {
var index = i;
document.getElementById('button' + index).onclick = function() {
console.log(index + 1);
};
})();
}
}
t();
};
// 2 variant
window.onload = function(){
function t() {
for (var i = 0; i < 3; i++) {
document.getElementById('button' + i).onclick = function(index) {
return function() {
console.log(index + 1);
};
}(i);
}
}
t();
};
// 3 variant
window.onload = function(){
function makeHelpCallback(index) {
return function() {
console.log(index + 1);
};
}
function t() {
for (var i = 0; i < 3; i++) {
document.getElementById('button' + i).onclick = makeHelpCallback(i);
}
}
t();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment