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

/

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?

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

http://www.html5rocks./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?

• javascript
• html
• drag-and-drop

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

2 Answers 2

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?

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);