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函数在调度程序对象的范围内执行。

Answer 3

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

尝试替换它：

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那样的东西）然后只留下传递参数的问题，这是通过将方法包装在另一个函数中来完成的。

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

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>';
}

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

6 个答案: