jPack events Demo

Javascript component for attaching events to DOM elements with shorthand preventDefault methods

by Shane Stebner

HTML

<script src="https://htmlguyllc.github.io/jPack/dist/jpack.bundled.min.js"></script>
<a href="#" class="button1">Click to toggle</a> (handler removed after 5 seconds)
<hr>
<a href="#" class="button2">Click to toggle</a>
<hr>
<a href="#" class="button3">Click to toggle</a>
<hr>
<form>
  Enter your name and hit enter
  <input>
</form>

CSS

a{
  color: black;
}

.toggled{
  color: blue;
}

JavaScript

/**
jPack events Demo
https://htmlguyllc.github.io/jPack/#events
*/

var handler = jpack.events.onClick('.button1', function(){
	  this.classList.toggle('toggled');
});

//after 5 seconds, clicking the first link won't do anything
window.setTimeout(function(){
	jpack.events.off('.button1', 'click', handler);
}, 5000);

//tie events to a custom namespace
jpack.events.setGlobal('bellybutton');

bellybutton.onClick('.button2', function(){
  this.classList.toggle('toggled');
});

//tie events to the global namespace
jpack.events.setGlobal();

onClick('.button3', function(){
  this.classList.toggle('toggled');
});

onSubmit('form', function(){
	this.innerHTML = `Nice to meet you ${this.querySelector('input').value}`;
});