Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 drag & drop events in Javascript

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?

like image 235
KdgDev Avatar asked Feb 24 '23 01:02

KdgDev


1 Answers

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?

like image 168
Matt Ball Avatar answered Feb 26 '23 22:02

Matt Ball