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

thisonclickイベントハンドラー内には、オブジェクトではなく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（メソッドを動的に変更する場合を除いて、これは良い考えではないようです）。コードを1つにできる2つの場所に分割しているようです。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 に答える