How to tell what type of element an event was triggered on

Question

I am using the following module to reveal a sub menu:

icisSite.fatNav = function(trigger){

    function init() {
        width = 0,
        $mainMenuListEl = $('.nav-SiteNav .nav-list > li'),
        $subNav = $('.subNav > li > ul');
        appendSubNav();
        getWidth();
    };

    function appendSubNav(){
        $subNav.each(function(index){
            index = ++index;
            $(this).appendTo($mainMenuListEl[index]);   
        });    
    };

    function subNavShow(trigger){
        setWidth(trigger);
        trigger.toggleClass('hover');   
    };

    function subNavHide(trigger){
        trigger.toggleClass('hover');
        trigger
        .find('ul')
        .removeAttr('style');
    };

    function getWidth(){
        $mainMenuListEl.each(function(index){
            width += parseInt($(this).outerWidth());
        });

        width = width - 11;
    };

    function setWidth(trigger){
        trigger
        .find('ul')
        .css({'width': width}); 
    };

    return {
        setup: init,
        show: subNavShow,
        hide: subNavHide
    };

}();

icisSite.fatNav.setup();

$('.nav-SiteNav .nav-list > li:gt(0)').hover(function() {
    $this = $(this);
    icisSite.fatNav.show($this);    
},function(e) {
    icisSite.fatNav.hide($this);
});

$('.nav-SiteNav .nav-list > li:gt(0) a').focusin(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .css({'width': icisSite.width});

}); 

$('.nav-SiteNav .nav-list > li:gt(0) a').focusout(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .removeAttr('style');

});

I want to refactor to accomodate the focusin and focusout events. As the code is very similar to the hover event but not the same.

I am unsure how to do this other than checking the type of element that 'trigger' is and wondered if there is a better way?

I am not even sure how to retrieve the type of element either? So if it was a hover it would return an li element and a focus an anchor element.

Answer 1

If you want to test if a jQuery object is something you can simply use .is()

if($(this).is('li')){
}

if($(this).is('a')){
}

Also, you might be able to refactor you focusin, focusout some as well by checking the event.type

not tested , but might look something like this...

$('.nav-SiteNav .nav-list > li:gt(0) a').bind("focusin, focusout", function(event) {
    var $this = $(this);
    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul');

   if(event.type =="focusout"){
     $this.removeAttr('style');
   }
   else
   {
     $this.css({'width': icisSite.width});
   }
});

Answer 2

Wouldn't

$(this).get(0).tagName

be a better way of getting the type of tag, instead of going

if($(this).is('li')){
}

?