Javascript onclick事件调用对象 [英] Javascript onclick event call object

问题描述

可能重复：

我正在执行与Javascript相关的作业，并且需要制作与特定输入相关联的日历。

日历始终显示且不会隐藏，等等。

可以有多个日历指向不同的日历文本字段。

现在，每个日历都是由Javascript对象创建的，即

  var cal1 = new Calendar（ inputfield_id）; 
  

现在，日历对象具有某些要在单击日历时访问的变量。

所以，基本上，我的问题是，有没有一种方法可以为onclick事件获取特定的对象，即当您处于对象中时以某种方式获取 this变量。 / p>

---

下面是一小段代码，用以说明我要执行的操作：

 功能日历（id）{
 this.date = new Date（）; 
 this.id = id; 
 this.next_year = function（）{
 this.date.setFullYear（this.date.getFullYear（）+ 1）; 
警报（this.date）; //基本上我想在这里获取对象上下文以更改日期
} 
 
 var temp_but = document.createElement（ button）。onclick = this.next_year; 
 document.getElementById（id + _ div）。appendChild（temp_but）; 
 document.getElementById（id + _ div）。lastChild.onclick = this.next_year; 
 
} 
  

基本上是在今年函数，我想获取对象上下文以获取日期并相应地更改日历。

解决方案

我认为这就是您要执行的操作...

 函数calendar（id）{
 this.date =新的Date（）; 
 this.id = id; 
 var context = this; 
 this.next_year = function（）{
 context.date.setFullYear（context.date.getFullYear（）+ 1）; 
 alert（context.date）; //基本上我想在这里获取对象上下文以更改日期
} 
 
 var temp_but = document.createElement（ button）。onclick = this.next_year; 
 document.getElementById（id + _ div）。appendChild（temp_but）; 
 document.getElementById（id + _ div）。lastChild.onclick = this.next_year; 
 
} 
  

本质上，我们使用闭包来保留引用到此称为上下文。 this.next_year 现在通过 context 引用了日历对象。

---

编辑：针对发表的评论OP的一点JS课。

---

当您调用函数作为构造函数时（例如 new calendar（ example）），则将创建一个新的空对象，并在新的空对象的上下文中执行该函数。

注意：并不是真的只是一个空对象。它是一个空对象，在某些内部指针在幕后，例如原型继承。

任何人！在整个函数中，对此的任何引用均指当前上下文。并且，因为当您使用函数作为构造函数时，它会在新创建的对象的上下文中调用该函数，因此可以使用 this.someProperty 设置对象的属性。

当执行语句 var cal1 = new calendar（ inputfield_id）; 时，将创建一个新对象，并且您的函数 calendar 在所述对象的上下文中执行。因此， this.date = new Date（）; 和 this.id = id 设置<$ c $新日历对象的c> date 和 id 属性。

我是假设您实际上并不了解这里发生的事情： this.id = id; 而是为什么要<< c> c $ 关键字在 this.next_year 中无效。

让我们从一个可行的场景开始。如果您要呼叫 cal1.next_year（）; ，您将在以下情况下呼叫 next_year（） cal1 ，因此 this.date.setFullYear（this.date.getFullYear（）+ 1）; 将增加 cal1 的date属性按预期方式增加了1年。

在点击事件处理程序中它不起作用，因为当您设置事件处理程序，您说的是当触发'click'事件时，执行此功能，而不是说当触发'click'事件时，执行此语句。

实际执行的功能是：

  function（）{
 this.date.setFullYear（this.date.getFullYear（）+ 1）; 
警报（this.date）; 
} 
  

和您希望执行的语句为：

  this.next_year（）; //这是指日历对象。 
  

---

在执行此代码时，

  elem.onclick = this.next_year; 
  

这与说相同，

  elem.onclick = function（）{
 this.date.setFullYear（this.date.getFullYear（）+ 1）; 
警报（this.date）; 
} 
  

所以，如果这不能使问题足够清楚，让我走再进一步解释一下使用 elem.onclick = this.next_year设置了单击处理程序后单击元素 elem 时的实际情况。 。我喜欢这样想，好像浏览器正在调用 elem.onclick（[Event event]）; 。本质上，使用 elem.onclick = 设置的函数是在 elem 和 Event 对象作为第一个也是唯一的参数传入。

要公然清除并指出要点，<$ c函数中的$ c> this 关键字指向浏览器作为事件处理程序调用该元素时单击的元素。

  function（）{
 this.date.setFullYear（this.date.getFullYear（）+ 1）; 
警报（this.date）; 
} 
  

---

对于说明和重复/多余。我尽量使答案简短，因为我通常不善于解释：P

PS-别忘了接受！

Possible Duplicate:
How do I pass the this context into an event handler?

I am doing a Javascript related assignment and am required to make a calendar which is associated with a particular input.

The calendar is displayed constantly and does not hide, etc.

There can be multiple calendars pointing to different text fields.

Now, each calendar is created by a Javascript object, i.e.

var cal1=new Calendar("inputfield_id");

Now the calendar object has certain variables that I want to access when the calendar is clicked on.

So basically, my question is, is there a way to get a particular object for an onclick event, i.e. somehow getting the "this" variable when you are in an object.

---

Here's a small portion of the code to explain what I am trying to do:

function calendar(id){
   this.date=new Date();
   this.id=id;
   this.next_year=function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date); // basically I want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

basically, in this.nextyear function, I want to get object context to get date and change calendar accordingly.

解决方案

I think this is what you're looking to do...

function calendar(id){
   this.date=new Date();
   this.id=id;
   var context = this;
   this.next_year=function(){
        context.date.setFullYear(context.date.getFullYear()+1);
        alert(context.date);//basically i want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

Essentially, we're using a closure to preserve a reference to this called context. this.next_year now has a reference to the calendar object via context.

---

EDIT: a little JS lesson in response to the comment OP posted.

---

When you call a function as a constructor (i.e. new calendar("example")), a new empty object is created and the function is executed in the context of the new empty object.

note: It's not really just an empty object. It's an empty object with certain internal pointers behind the scenes for things like prototypal inheritance.

Anywho! Throughout a function, any reference to this refers to the current context. And, because when you use a function as a constructor, it calls the function in the context of a newly created object, you can set properties of the object using this.someProperty.

When you execute the statement var cal1=new calendar("inputfield_id");, a new object is created, and your function calendar gets executed in the context of said object. So, this.date=new Date(); and this.id=id are setting the date and id properties of your new calendar object.

I'm assuming you aren't actually having trouble understanding what happens here: this.id=id; but rather why the this keyword wasn't working in this.next_year.

Let's start off with a scenario where it would have works. If you were to call cal1.next_year();, you'd be calling next_year() in the context of cal1, so this.date.setFullYear(this.date.getFullYear()+1); would increment cal1's date property by 1 year as expected.

It wasn't working at the click event handler because when you set the event handler, you're kind of saying "when the 'click' event is fired, execute this function" as opposed to "when the 'click' event is fired, execute this statement".

the function that's actually executing being:

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

and the statement you were expecting to execute being:

   this.next_year(); //where this refers to the calendar object.

---

When this code is executing,

elem.onclick = this.next_year;

it's the same as saying,

elem.onclick = function(){
    this.date.setFullYear(this.date.getFullYear()+1);
    alert(this.date);
}

So, if this doesn't make the issue clear enough, let me go a little further and explain what actually happens when an element, elem, is clicked after a click handler was set using elem.onclick=this.next_year;. I like to think of it as though the browser is calling elem.onclick([Event event]);. Essentially, the function you set using elem.onclick= is executed in the context of elem and an Event object is passed in as the first and only argument.

To be blatantly clear and drive the point home, the this keyword in your function points to the element that was clicked when it's invoked by the browser as an event handler.

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

---

I apologize for over-explaining and being repetitive/redundant. I try to keep my answers short because I'm generally bad at explaining things :P

PS - don't forget to accept!

这篇关于Javascript onclick事件调用对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！