Skip to content

Changed onsubmit to use addEventListener #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lejonmanen wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Changed onsubmit to use addEventListener #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
Here is some messy browser JavaScript that uses [browser-request](https://github.com/iriscouch/browser-request) to make an AJAX request to a server:

var form = document.querySelector('form')
form.onsubmit = function (submitEvent) {
form.addEventListener('submit', function (submitEvent) {
var name = document.querySelector('input').value
request({
uri: "http://example.com/upload",
Expand All @@ -119,12 +119,12 @@
if (err) return statusMessage.value = err
statusMessage.value = body
})
}
});

This code has two anonymous functions. Let's give em names!

var form = document.querySelector('form')
form.onsubmit = function formSubmit (submitEvent) {
form.addEventListener('submit', function formSubmit (submitEvent) {
var name = document.querySelector('input').value
request({
uri: "http://example.com/upload",
Expand All @@ -135,7 +135,7 @@
if (err) return statusMessage.value = err
statusMessage.value = body
})
}
});

As you can see naming functions is super easy and has some immediate benefits:

Expand All @@ -145,7 +145,7 @@

Now we can move the functions to the top level of our program:

document.querySelector('form').onsubmit = formSubmit
document.querySelector('form').addEventListener('submit', formSubmit);

function formSubmit (submitEvent) {
var name = document.querySelector('input').value
Expand Down Expand Up @@ -194,7 +194,7 @@
Now that we have `formuploader.js` (and it is loaded in the page as a script tag after being browserified) we just need to require it and use it! Here is how our application specific code looks now:

var formUploader = require('formuploader')
document.querySelector('form').onsubmit = formUploader.submit
document.querySelector('form').addEventListener('submit', formUploader.submit);

Now our application is only two lines of code and has the following benefits:

Expand Down