4

I followed a little tutorial on Drag & Drop in HTML with Javascript, found here:

http://www.html5rocks.com/tutorials/dnd/basics/

The problem is, I'm working with an in-house style restriction. Meaning all documents have to be written to standards that everyone here uses.

For Javascript, one of them is to always write functions in the object-notation.

I.e.

var myFunction = function() {}

instead of

function myFunction() {}

In this tutorial, the events for the HTML5 drag & drop are added via the addEventHandler() function. This requires you use the normal notation, because if you use the object-notation, the addEventHandler() function trips over it for some reason.

I tried re-writing everything to be like this, without addEventHandler:

myElement.dragstart = function(e) {}

But non of it worked. Using the normal notation with addEventHandler however, everything works like a charm. I just wanna make sure: am I overlooking something or should this work? Part of me suspects this is just not supported properly yet and you need to use addEventHandler. Is this the case?

Improve this question
3
  • 6
    Your in-house restriction is absolutely and completely stupid. Whoever decided on that is a moron. Commented May 28, 2011 at 20:59
  • 'Trips over' is a bit vague... do you get an error message in the JS console? Commented May 28, 2011 at 20:59
  • It looks like that var myFunction = function() { ... }; would make debugging hard. (no function names in stack traces) Commented May 28, 2011 at 21:06

2 Answers 2

Reset to default
4

Setting the dragstart property vs using addEventHandler('dragstart', ...) is not just a matter of notation. You can and should stick with addEventHandler. There should be no problem, however, using this "style:"

var myFunction = function() {}

myElement.addEventListener('dragstart', myFunction, ...);

Edit

Okay, so this doesn't directly answer the question, but I feel it does need to be addressed in this context.

Writing

var myFunction = function() {}

instead of

function myFunction() {}

is not any sort of "object notation." The first is a function expression, since it's part of an AssignmentExpression. The second is a function declaration. What's the difference? kangax explains it really well:

First of all, function declarations are parsed and evaluated before any other expressions are. Even if declaration is positioned last in a source, it will be evaluated foremost any other expressions contained in a scope.
...
Another important trait of function declarations is that declaring them conditionally is non-standardized and varies across different environments. You should never rely on functions being declared conditionally and use function expressions instead.

Do the people who set the JavaScript code standards in-house really understand the subtle differences?

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Perhaps there should't... but there is. I did it like this originally, since I saw little difference other than switching 2 words and adding a = sign. But it won't work like that.
See my edit. Perhaps you're trying to conditionally declare the function? It might help if you can provide slightly more context illustrating the exact conditions in which using a function declaration works but a function expression does not work.
This "last in a source, it will be evaluated foremost any other expressions contained in a scope." is simply not true.
@c-smile do you have any evidence that supports that? A jsFiddle, at least? The burden of proof is on you.
evidence of what actually? Anyway... there are two phases of script execution. Compilation (to bytecode or something like that) and execution (of the bytecode). Function declarations are being compiled and assigned to names at compilation phase. This happens after FormalParameterList names are entered but before VariableDeclaration are entered to the namespace. That is according to ECMA specification.
4

Point number 1: that's a stupid rule. There are two ways of naming a function for a good reason, and ignoring that to specify one style is fairly dim, IMO.

Your problem is, I think, that your function hasn't been defined by the time you get to addEventHandler. This is because of something called "hoisting". In this process, functions named with the function myFunction() {} syntax are "hoisted" to the top of the function. So if you invoke them anywhere in the function, the function will work. For instance, this will work:

el.addEventListener('click', foo);
function foo() {}

Functions named in your organisation's style, however, are not hoisted. The variable declaration is, but the value is not set until that line of code is reached. So this will not work:

el.addEventListener('click', foo);
var foo = function() {};

The easiest way to get around this would be to move all your function definitions to the top of the scope, unless there is a good reason to define them later. So this will work:

var foo = function() {};
el.addEventListener('click', foo);
Improve this answer

1 Comment

@Matt I did clarify that... See the paragraph starting "Functions named".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.