Skip to content

Instantly share code, notes, and snippets.

@chadwithuhc

chadwithuhc/index.html

Created November 10, 2017 22:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chadwithuhc/55f0ace5a047a4f608772c48931c7722 to your computer and use it in GitHub Desktop.
Save chadwithuhc/55f0ace5a047a4f608772c48931c7722 to your computer and use it in GitHub Desktop.
Download ZIP
DOM Events Sample
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
nav {background: tomato}
</style>
</head>
<body>
<nav id="nav" data-something="nav !">
<a id="a" href="http://google.com" data-something="Hi">One</a>
<a href="http://yahoo.com">Two</a>
<a href="http://page.com">Three</a>
</nav>
<form id="name-form">
<input id="input" type="text" placeholder="What's your name?">
<button>Add Name</button>
</form>
<script>
var aEl = document.getElementById('nav')
aEl.addEventListener('click', function(event) {
event.preventDefault()
console.log(`Event Target`, event.target)
console.log(event.target.dataset.something)
})
var formEl = document.getElementById('name-form')
formEl.addEventListener('submit', function(e) {
e.preventDefault()
console.log(e)
var inputEl = document.getElementById('input')
console.log(inputEl.value)
})
var $formEl = $('#name-form')
$formEl.on('submit', function(e) {
e.preventDefault()
console.log(e)
var inputEl = document.getElementById('input')
console.log(inputEl.value)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment