0

这是我的html代码结构：

<dl id="J_tab">
    <dt>
        <a href="#tab1">tab1</a><a href="#tab2">tab2</a><a href="#tab3">tab3</a>
    </dt>
    <dd id="tab1">
      ..
    </dd>
    <dd id="tab2">
      ...
    </dd>
    <dd id="tab3">
      ..
    </dd>

</dl>

Javascript代码：

var tab = function(id,anchorContainer,curClass){
  this.curClass = curClass || 'current';
  this.tabContainer = document.getElementById(id);
  this.anchorContainer = this.tabContainer.getElementsByTagName(anchorContainer)[0];
  this.links = this.anchorContainer.getElementsByTagName('a');
  this.init();
};
tab.prototype = {
constructor:tab,
init: function(){
  var container = this.tabContainer;
  container.onclick = function(event){
     var type = this.checkType(event);
     if(type == 'onclick'){
         //do this...
     }else if(type == 'onmouseover'){
         //do this....
     }else{
         //do nothing...
     }
  }
},
  show: function(){
      alert(123);
  },
  hide: function(){
      alert(456);
   },
  checkType: function(event){
    var event = event || window.event;
    return event.type;
   }
 }
 var tab = new tab('J_tab','dt');

我没有继续，因为我在检查事件类型时遇到问题。错误导致类型未定义。如何使用我的代码检查事件类型？

this.checkType() 可以像下面这样吗？

if(event=="click" || event==null){
container.onclick=function(){


    }
}else if(event=="mouseover"){
container.onmouseover=function(){

}
}
4

2 回答 2

1

this在您的onclick事件处理程序内部是对 DOM 元素的引用，而不是您的对象。

要访问您的对象，请将其存储在外部范围的局部变量中：

init: function() {
    var self = this;

    this.tabContainer.onclick = function(event) {
        var type = self.checkType(event);
        // Keep up the good work...
    }
}

并且向下checkType，只需使用这个：

checkType: function(event) {
    return (event || window.event).type;
}

或者，由于里面的代码checkType非常简单，您可以考虑将其全部内联：

init: function() {
    this.tabContainer.onclick = function(event) {
        var type = (event || window.event).type;
    }
}
于 2012-11-12T02:53:14.757 回答
0

除了约瑟夫的答案之外的一些东西。

函数的this设置取决于函数的调用方式。如果您使用以下方法将函数分配给 DOM 元素：

someElement.onclick = someObject.method;

那么该函数将（有效地）被称为：

someElement.method();

设置this为. method_ someElement当将函数分配为对象的属性，然后将函数作为对象的方法调用时，通常会发生同样的事情。

对代码的一些评论：

  1. 按照惯例，构造函数以大写字母开头（表示它们应该用 来调用new）。

  2. 使用函数声明而不是表达式可能更好（更清晰）。

  3. 我不知道为什么流行init在原型上分配一个方法，然后从构造函数中调用它（除非您打算动态更改方法，这似乎不是一个好主意）。它似乎只是将代码分成两个可能合二为一的地方。只需将 init 函数作为代码放入构造函数中即可

例如：

function Tab(id, anchorContainer, curClass) {
  this.curClass = curClass || 'current';
  this.tabContainer = document.getElementById(id);
  this.anchorContainer = this.tabContainer.getElementsByTagName(anchorContainer)[0];
  this.links = this.anchorContainer.getElementsByTagName('a');

  // Put other "init" code here
  // Use the generic instance name for the instance, not "self"
  var tab = this;

  // From here on, use 'tab' not 'this' to refer to the instance
  tab.tabContainer.onclick = function(event) {
     /* instance is 'tab', element is 'this' */
  }

  Tab.prototype = { /* ... */ };
}

关于init函数和使用函数表达式：

var foo = new Foo(); // Happy :-)

var Foo = function(){
  /* init code */;
}

但

var Foo = function(){
  this.init();
}

var foo = new Foo(); // Error: this.init is not a function (or similar)

Foo.prototype = {
  init: function(){ /* init code */ }
};
于 2012-11-12T04:21:19.363 回答