jquery的blur事件

我有很多blur的事件要怎么封装啊,还是只能都写在
$(document).ready(function() { });里面。以下blur触发事件都调用一个方法。我要怎么写才可以写得比较简洁啊。

$(document).ready(function() {
    var $mobile = $("input[name='mobile']");
    var $partyaMobile = $("input[name='partyaMobile']");
    var $partyaTechnologyMobile = $("input[name='partyaTechnologyMobile']");
    var $partybMobile = $("input[name='partybMobile']");
    var $partybTechnologyMobile = $("input[name='partybTechnologyMobile']");
    var $linkManMobile = $("input[name='linkManMobile']");
    var $contactTel = $("input[name='contactTel']");
    var $meContractTel = $("input[name='meContractTel']");
    var $operatorContractTel = $("input[name='operatorContractTel']");
    var $email = $("input[name='email']");
    var $adminId = $("input[name='adminId']");

    $mobile.blur(function(){
        isMobile($mobile);
    });
    $partyaMobile.blur(function(){
        isMobile($partyaMobile);          
    });
    $partyaTechnologyMobile.blur(function(){
        isMobile($partyaTechnologyMobile);          
    });
    $partybMobile.blur(function(){
        isMobile($partybMobile);   
    });
    $partybTechnologyMobile.blur(function(){
        isMobile($partybTechnologyMobile);  
    });
    $linkManMobile.blur(function(){
        isMobile($linkManMobile);
    });
    $contactTel.blur(function(){
        isMobile($contactTel); 
    });
    $meContractTel.blur(function(){
        isMobile($meContractTel);
    });
    $operatorContractTel.blur(function(){
        isMobile($operatorContractTel); 
    });
    $email.blur(function(){
        isEmail($email);       
    });
    $adminId.blur(function(){
        isAdminId($adminId);       
    });
});
阅读 4.3k
3 个回答

可以使用以下方式
1.调用相同handler的dom元素加一个相同的class,这样你就可以一下子选择多个元素直接绑定事件了。
但这时,isMobile需要简单的改写一下,isMobile(event),然后函数内通过event获取出发事件的元素(e.target)。如下所示

<input class="mobile" name="xxx">
$('.mobile').on('blur', isMobile)

2.用代理,如这些input是在form里面,如下所示

$('form').on('blur', 'input', handler)

然后在handler里面判断不同类的元素选择不同的处理,handler可以类似下面

function handler(e){
   var $el = $(e.target);
   if($el.hasClass(isMobile)){...}
   if($el.is("input[name='email']")){...}
   if($el.is("input[name='adminId']")){...}
}

推荐第二种,一个画面事件绑定越少越好。

javascript$(function(){
    $('#a,#b,#c,#d,……').blur(function(){
        isMobile(this);
    });
});
$(function(){
    $('form input').blur(function(){
        isMobile($(this).attr('name'));
    });
});

根据楼上的再修改,当然也可以在执行前再加一些判断

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进