javascript - 如何判断触发事件的元素类型

Question

我正在使用以下模块来显示子菜单:

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

});

我想重构以适应 focusin 和 focusout 事件。由于代码与悬停事件非常相似但又不相同。

除了检查“触发”的元素类型之外，我不确定该怎么做，想知道是否有更好的方法？

我什至不知道如何检索元素的类型？因此，如果它是一个悬停，它将返回一个 li 元素和一个焦点元素。

Answer 1

如果你想测试一个 jQuery 对象是否是你可以简单地使用 .is() 的东西

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

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

此外，您还可以通过检查 event.type 来重构 focusin，focusout 一些

未测试，但可能看起来像这样......

$('.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});
   }
});