Skip to content

Instantly share code, notes, and snippets.

@fidelisrafael

fidelisrafael/event_delegation.html

Last active December 23, 2015 07:09
Show Gist options
  • Save fidelisrafael/6599259 to your computer and use it in GitHub Desktop.
Save fidelisrafael/6599259 to your computer and use it in GitHub Desktop.
Download ZIP
Event delegation in Javascript. (w/ simple CSS3 animation)
Raw
event_delegation.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Teste Event Delegation</title>
<style>
/* Document style */
body * {
box-sizing : border-box;
}
ul {
padding:10px;
}
body {
font-family: Lato, Calibri, Arial, sans-serif;
color:#ffffff;
background:#ffffff;
margin:0;
padding:0;
font-size:0.9em;
}
section {
padding:1.5em;
margin: 0 auto;
}
section:first-child {
background: #0E83CD;
}
/* Links */
a {
color:#ffffff;
text-decoration: none;
}
a:hover {
color:red;
}
.results-list li {
cursor:pointer;
}
/* articles */
article {
display: inline-block;;
vertical-align: top;
}
article.event-delegation {
margin-right:5%;
}
/* Text style */
header > * {
font-size:1.3em;
margin:0;
}
small {
font-size:0.8em;
}
header {
margin-bottom: 2em;
}
section > header > * {
font-size:2em;
text-align: center;
margin-bottom: 3em;
}
/* Simple and ugly button , fuckyeah */
button {
border:0;
color:#ffffff;
border:2px solid #ffffff;
font-size:0.8em;
padding:0.5em;
opacity:0.9;
width:100%;
-webkit-animation: back_color_animation 20s infinite;
-moz-animation: back_color_animation 20s infinite;
-o-animation: back_color_animation 20s infinite;
-ms-animation: back_color_animation 20s infinite;
animation: back_color_animation 20s infinite;
}
button:hover {
opacity:1.0;
}
button:active {
border-color:#333333;
}
.color-animation {
-webkit-animation: color_animation 20s infinite;
-moz-animation: color_animation 20s infinite;
-o-animation: color_animation 20s infinite;
animation: color_animation 20s infinite;
}
.text-shadow {
-webkit-text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
-moz-text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
-o-text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
-ms-text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7);
}
/* Helper classes */
.heart {
color:red;
font-size: 1.4em;
}
.text-center {
text-align: center;
}
.transition-all {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
transition:all 0.5s;
}
/* Animations */
/* Font color animation */
@-webkit-keyframes color_animation {
0% { color: #D14DA1; }
20% { color: #774DD1; }
40% { color: #86D14D; }
60% { color: #D1934D; }
80% { color: #D14F4D; }
}
@-moz-keyframes color_animation {
0% { color: #D14DA1; }
20% { color: #774DD1; }
40% { color: #86D14D; }
60% { color: #D1934D; }
80% { color: #D14F4D; }
}
@-o-keyframes color_animation {
0% { color: #D14DA1; }
20% { color: #774DD1; }
40% { color: #86D14D; }
60% { color: #D1934D; }
80% { color: #D14F4D; }
}
@keyframes color_animation {
0% { color: #D14DA1; }
20% { color: #774DD1; }
40% { color: #86D14D; }
60% { color: #D1934D; }
80% {color: #D14F4D; }
}
/* Background color animation */
@-webkit-keyframes back_color_animation {
0% { background-color: #D14DA1; }
20% { background-color: #774DD1; }
40% { background-color: #86D14D; }
60% { background-color: #D1934D; }
80% { background-color: #D14F4D; }
}
@-moz-keyframes back_color_animation {
0% { background-color: #D14DA1; }
20% { background-color: #774DD1; }
40% { background-color: #86D14D; }
60% { background-color: #D1934D; }
80% { background-color: #D14F4D; }
}
@-o-keyframes back_color_animation {
0% { background-color: #D14DA1; }
20% { background-color: #774DD1; }
40% { background-color: #86D14D; }
60% { background-color: #D1934D; }
80% { background-color: #D14F4D; }
}
@keyframes back_color_animation {
0% { background-color: #D14DA1; }
20% { background-color: #774DD1; }
40% { background-color: #86D14D; }
60% { background-color: #D1934D; }
80% { background-color: #D14F4D; }
}
</style>
</head>
<body>
<section>
<header>
<h1 class="color-animation text-shadow">JS Event Delegation</h1>
</header>
<article class="event-delegation">
<header>
<h1>Dinamic elements</h1>
<small>Click on child element</small>
</header>
<button id="add-new-item" class='transition-all'>[+] Adicionar novo item</button>
<ul class='results-list'>
<li data-id='1'>ID #1</li>
<li data-id='2'>ID #2</li>
<li data-id='3'>ID #3</li>
<li data-id='4'>ID #4</li>
<li data-id='5'>ID #5</li>
</ul>
</article>
<article class="log">
<header>
<h1>Events log</h1>
<small>Important events will be listed</small>
</header>
<ul class="click-log">
</ul>
</article>
<footer>
<p class='text-center'><br />
This shit was made with love <span class='heart'>&hearts;</span> by
<a href="http://defidelis.herokuapp.com" title="Rafael Fidelis : Blog" class='transition-all' target="_blank">Rafael Fidelis</a>
</p>
</footer>
</section>
<script>
(function() {
'use strict';
var results = document.querySelector('.results-list'),
log = document.querySelector('.click-log');
results.addEventListener('click' , function(ev) {
if (ev.target.nodeName == 'LI') {
var li = document.createElement('li');
li.innerHTML = 'List item ID #' + ev.target.dataset.id + ' has clicked';
log.appendChild(li);
};
});
// Button add new element clicked
document.querySelector("#add-new-item").addEventListener("click" , function() {
var element = document.createElement('li');
element.dataset.id = (results.childElementCount + 1);
element.innerHTML = "ID #" + element.dataset.id ;
// Add element to parent element
results.appendChild(element);
// clone element to append in log list
var newElement = element.cloneNode(true);
newElement.innerHTML = 'Element ID # ' + newElement.dataset.id + ' added';
log.appendChild(newElement);
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment