在javascript对象生成的链接中使用“this”

Question

Javascript对我来说很不稳定，我似乎无法找到答案。 我有一些代码

var Scheduler = function(divid,startDate,mode){

    this.setHeader = function(){
          header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>';

    }

   this.showScheduler = function period(){

        ...
   }

};

我的问题是，如何将onclick放入HTML中，以便正确调用showScheduler函数以获取我正在使用的当前调度程序对象的相应实例？

Answer 1

我不会做你正在做的任何事情，但是按照你的方式使用代码，我会这样做（很多做和做:)）：

var Scheduler = function(divid, startDate, mode){
    var that = this;

    this.setHeader = function(){
          header.innerHTML = '<a href="#">Show</a>';
          header.firstChild.onclick = function() { that.showScheduler(1); };
    }

   this.showScheduler = function period(){

        ...
   }
};

Answer 2

你应该使用这种类型的框架。 如果您不使用，那么您必须将每个调度实例声明为全局对象，并且您需要实例的名称才能从链接中调用它。 请看以下链接

http://developer.yahoo.com/yui/examples/event/eventsimple.html

它们只显示正在应用的功能，但您也可以执行此类操作

YAHOO.util.Event.addListener(myAnchorDom, "click", this.showScheduler,this,true);

myAnchorDom是achor标签dom对象。 这将使showScheduler函数在scheduler对象的范围内执行。

Answer 3

而不是使用innerHTML使用DOM方法。

尝试替换这个：

header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>';

有了这个：

var x = this; // create a closure reference
var anchor = document.createElement('a');
anchor.href= '#';
anchor.innerHTML = 'Show';
anchor.onclick = function() { x.showScheduler(1); }; //don't use onclick in real life, use some real event binding from a library
header.appendChild(anchor);

说明：

原始代码中的“this”指的是触发事件的元素，即锚点（“这个”对于像这样的事情而言是众所周知的问题。）解决方案是在正确的方法上创建一个闭包（这就是为什么你必须创建像上面的var x这样的东西，然后只留下传递参数的问题，这是通过将方法包装在另一个函数中完成的。

严格来说，将事件处理程序与addEventListener / attachEvent对绑定会更为可取（因为直接事件赋值会排除将多个处理程序分配给一个事件的能力），但如果你是JS的新手，最好使用像jquery这样的库来处理它。

Answer 4

您可以直接向头对象添加事件处理程序：

var me = this;

this.setHeader = function(){
          header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>';

header.addHandler("click", function(e) { me.showScheduler(1); });
    }

在传递函数的现场，这将引用头元素。

Answer 5

var Scheduler = function(divid, startDate, mode)
{
    var xthis = this;

    this.setHeader = function()
    {
          var lnk = document.createElement("a");
          lnk.addEventListener("click", xthis.showScheduler, false);
          lnk.innerText = "Show";
          lnk.setAttribute('href', "#");
          header.appendChild(lnk);
    }

   this.showScheduler = function period(){

        ...
   }
};

Answer 6

在onclick属性中使用“this”时，实际上是指锚标记对象。 试试这个，看它是否有效：

this.setHeader = function(){
      header.innerHTML = '<a href="#" onclick="Scheduler.showScheduler(1);">Show</a>';
}