javascript - Why I could not add mousemove event after mousedown in prototype? -

I'll move my former JS code to more OOP style here's the code.

  function addEvent (obj, type, fn) {if (obj.attachEvent) {obj ['e' + type + fn] = fn; Obj [type + fn] = function () {obj ['e' + type + fn] (window.event);} obj.attachEvent ('over' + type, obj [type + fn]); } And obj.addEventListener (type, FN, incorrect); } Function Test () {} test.prototype = {init: function () {addEvent (document, 'Masudown', this.displaydown); }, Display: function (e) {document.getElementById ('mydiv'). InnerHTML = "down"; AddEvent (document, 'mousemove', this.displaymove); }, Displaymove: function (e) {document.getElementById ('mydiv'). InnerHTML = "move"; }} Var test0 = new test (); Test0.init ()  

I can not combine with addEvent (document, 'mousemove', this.displaymove) after the mousedown event

 ;  

But if I type inline style

  addEvent (document, 'mousemove', function (e) {document.getElementById ('mydiv') InnerHTML = "move";});  

It's okay it seems that the 2 codes do the same thing, why is the difference? Thanks!

---

Edit,

After the struggle of 2 nights, I finally solved the problem. Thanks Joeya for your knowledge.

This arrow is it on the keyword in the case of an object, it automatically refers to the window instead of the solution. I started the global parameter me ( Me = this) is now well defined.

This is the classic JavaScript barrier, from which the "this" key is scoped within a closed instance :

  redPrinter = function () {this.X = 'red'; Return work () {return.X; }} Main = function () {this.X = 'blue'; Var myRedPrinter = new red printer (); Warning ("returned red printer:" + myRedPrinter ()); }  Main();  

This code will print:

  Red printer returned: blue  

Because in 'this' line:

  return.X  

In fact, the main () object is connected to the time of charge.

There are usually 2 ways to address this thing:

1) Avoid using keywords. To fix this code in such a way, I will simply collect all the bindings instead of one place instead of cascade, thus removing the 'this' context from both 'displaydown ()' and 'displaymove ()' Give:

  test.prototype = {init: function () {addEvent (document, 'mosudown', this.displaydown); AddEvent (document, 'mousemove', this.displaymove); }, Display: function (e) {document.getElementById ('mydiv'). InnerHTML = "down"; }, Displaymove: function (e) {document.getElementById ('mydiv'). InnerHTML = "move"; }}  

2) Use the function to bind the radius on definition time. I have clarified the bind () method from the prototype library:

  // Announce the universal bound () method for all functions Function.prototype.bind = function (obj) {var Method = This, temp = function () {return method.apply (obj, arguments); }; Return temporary; } Test.prototype = {init: function () {addEvent (document, 'mousewood', this.displaydown); }, Display: function (e) {document.getElementById ('mydiv'). InnerHTML = "down"; // Note that we build the law object with the Eyed Event (Bible, 'Mausomov', this DiceLame.bind (this)); }, Displaymove: function (e) {document.getElementById ('mydiv'). InnerHTML = "move"; }}  

Important changes are here:

  this.displaymove.bind (this)  

which basically says "When you call displaymove (), instead of the current event object, instead of the original radius, the keyword 'this' is scanned again.