How javascript check event type when scripting base prototype?

Question

Here is my html Code structure:

<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 code:

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

I'm not continue because I hava problem when i checking the event type.the error turns the type is no defined.how can i check the event type using my code?

Can this.checkType() do like below?

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


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

}
}

Joseph Silber · Accepted Answer · 2012-11-12 03:06:07Z

1

this inside your onclick event handler is a reference to the DOM element, not your object.

To get access to your object, store it in a local variable on the outer scope:

init: function() {
    var self = this;

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

And down in checkType, just use this:

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

Alternatively, since the code inside checkType is so trivial, you might consider just inlining it all:

init: function() {
    this.tabContainer.onclick = function(event) {
        var type = (event || window.event).type;
    }
}

edited Nov 12, 2012 at 3:06

answered Nov 12, 2012 at 2:53

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Yiada Over a year ago

oop!I went a wrong way,my original intention of this functionality is to check if the user wanted to setup the trigger options(click or mouseover)

Ryan Yiada Over a year ago

can this checkType() do this? [this.tabContainer.(onclick or onmouseover)], instead checking type in onclick function.

RobG · Accepted Answer · 2012-11-12 04:21:19Z

Some stuff in addition to Joseph's answer.

A function's this is set by how the function is called. If you assign a function to a DOM element using:

someElement.onclick = someObject.method;

then the function will (effectively) be called as:

someElement.method();

setting this in method to someElement. The same thing happends generally when assigning a function as property of an object, then calling the function as a method of the object.

Some comments on the code:

Constructors, by convention, start with a capital letter (indicating that they should be called with new).
It's likely better (clearer) to use function declarations rather than expressions.
I don't know why it's popular to assign an init method on the prototype, then call it from the constructor (unless you intend to dynamically change the method, which doesn't seem like a good idea). It just seems to split code into two places that could be in one. Just put the init function in the constructor as code

e.g.:

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 = { /* ... */ };
}

In regard to the init function and using function expressions:

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

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

But

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

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

Foo.prototype = {
  init: function(){ /* init code */ }
};

Collectives™ on Stack Overflow

How javascript check event type when scripting base prototype?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related