Skip to content

Instantly share code, notes, and snippets.

@colabottles

colabottles/index.html

Created January 7, 2020 02:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colabottles/b9ad9e6e37bda80c94bc193743c9245d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colabottles/b9ad9e6e37bda80c94bc193743c9245d to your computer and use it in GitHub Desktop.
Download ZIP
Listening for events and user interactions // source https://jsbin.com/wabamo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Listening for events and user interactions</title>
<style id="jsbin-css">
div {
display: grid;
justify-content: center;
}
button {
display: flex;
border: 2px solid black;
background: none;
padding: 0.75rem;
justify-content: center;
width: 24ch;
}
</style>
</head>
<body>
<div>
<button class="this-button" id="click-me-once">Click Me!</button>
</div>
<script id="jsbin-javascript">
var btn = document.querySelector('#click-me-once');
btn.addEventListener('click', function (event) {
console.log('You have clicked the button! Give yourself a pat on the back!');
console.log(event);
console.log(event.target);
}, false);
</script>
<script id="jsbin-source-javascript" type="text/javascript">var btn = document.querySelector('#click-me-once');
btn.addEventListener('click', function (event) {
console.log('You have clicked the button! Give yourself a pat on the back!');
console.log(event);
console.log(event.target);
}, false);
</script></body>
</html>
Raw
jsbin.wabamo.css
div {
display: grid;
justify-content: center;
}
button {
display: flex;
border: 2px solid black;
background: none;
padding: 0.75rem;
justify-content: center;
width: 24ch;
}
Raw
jsbin.wabamo.js
var btn = document.querySelector('#click-me-once');
btn.addEventListener('click', function (event) {
console.log('You have clicked the button! Give yourself a pat on the back!');
console.log(event);
console.log(event.target);
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment