HTML5 drag and drop events in Javascript

Question

I followed a small drag and drop tutorial in HTML using Javascript, which was found here:

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

The problem is that I work with the internal style. The meaning of all documents should be recorded in the standards that everyone here uses.

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

those.

var myFunction = function() {} 

instead

 function myFunction() {} 

In this lesson, HTML5 drag events are added through the addEventHandler() function. To do this, you need to use standard notation, because if you use object notation, the addEventHandler () function is disabled for some reason.

I tried rewriting everything to be like this without addEventHandler:

 myElement.dragstart = function(e) {} 

But that did not work. However, using the usual notation with addEventHandler, everything works like a charm. I just want to make sure: am I not noticing something or should it work? Part of me suspects that this is simply not supported properly, and you need to use addEventHandler. Is that the case?

Answer 1

Setting the dragstart vs property using addEventHandler('dragstart', ...) is not just a designation. You can and should stick with addEventHandler . However, there should be no problem using this style:

 var myFunction = function() {} myElement.addEventListener('dragstart', myFunction, ...); 

---

Edit

Okay, so this does not directly answer the question, but I feel that it needs to be addressed in this context.

Record

 var myFunction = function() {} 

instead

 function myFunction() {} 

is not any kind of "object notation." The first is a function expression, since it is part of the AssignmentExpression . The second is function declaration. Who cares? kangax explains this really well :

First of all, function declarations are parsed and evaluated before any other expressions. Even if the ad is positioned last in the source, it will be evaluated first of all any other expressions contained in the area.
...
Another important feature of function declarations is that their declarations are conditionally non-standardized and vary in different environments. You should never rely on functions declared conditionally, and use function expressions instead.

Do people who set JavaScript code standards at home know the subtle differences?

Answer 2

Point number 1: this is a stupid rule. There are two ways to name a function for a good reason, and ignoring the fact that to indicate one style is pretty dull, IMO.

Your problem, I think, is that your function was not defined at the time addEventHandler . This is because of something called a "climb." In this process, functions named with the syntax function myFunction() {} "rise" at the top of the function. Therefore, if you call them anywhere in the function, the function will work. For example, this will work:

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

However, the features named in your organization style do not come up. There is a variable declaration, but the value is not set until this line of code is reached. So this will not work:

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

The easiest way to get around this is to move all function definitions to the top of the field if there is no good reason to define them later. So this will work:

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