当我在骨干中调用同一个函数时,如何传递e.target值

时间:2015-09-07 16:46:31

标签: javascript jquery backbone.js

这是我创建的验证功能:

checkValidation: function (e) {
    e.stopPropagation();
    var data = $(e.target).val();
    var color = (data === '') ? '#F00' : '#000';

    $(e.target).css({ 'border': '1px solid ' + color });
}

每当触发focusout事件时都会调用此验证函数:

events: {
    'click #commentSubmit':'commentSubmitFun',
    'focusout #commUserName':'checkValidation',
    'focusout #commUserMsg':'checkValidation'
}

现在我想在checkValidation内调用相同的commentSubmitFun函数,如下所示:

if (userName !== '' && userComment !== '' {...}  else { this.checkValidation(); }

但是,如何将e.target传递到checkValidation函数?

3 个答案:

答案 0 :(得分:1)

点击后调用commentSubmitFun时,它也会传递event。如果您打算在checkValidation内致电commentSubmitFun,则可以将event对象作为参数传递到checkValidation来电。

说实话,我建议重构你的checkValidation函数,以字符串data作为参数。这样,无论何时拨打checkValidation,您都必须传入您明确检查过的数据。

答案 1 :(得分:1)

我同意@wmock的回答。但我认为用代码添加新答案会更好。

由于您已经有checkValidation函数需要Event对象e作为参数,因此您只需将e传递给它即可使其正常工作。因此,当您需要在checkValidation中调用commentSubmitFun()时,只需checkValidation(e),它就可以正常工作。

commentSubmitFun: function(e) {
    // e is the click event occured on #commentSubmit element
    if (youNeedCheck) {
        checkValidatoin(e)
    }
}

但我不认为将checkValidation用作事件监听器是一个好主意,这会导致您必须传递Event对象的限制只调用函数的参数。实际上,事件监听器被设计为仅在事件发生时被触发,它被绑定到事件并且不应该在其他地方被调用。

您最好将element作为此参数

checkValidation: function (el) {
    var data = $(el).val();
    var color = (data === '') ? '#F00' : '#000';

    $(el).css({ 'border': '1px solid ' + color });
}

然后,只要您需要验证某些内容,就可以调用此checkValidation函数。请记住在事件对象中重构代码。

events: {
    // ...
    'focusout #commUserName':'checkUserName'
}

checkUserName: function(e) {
    checkValidation(e.target);
}

答案 2 :(得分:1)

首先,这里有三个不同的问题

  • 检查某些数据的有效性
  • 处理验证错误
  • 调用验证逻辑

在最简单的情况下,你可以使用四个函数,

function checkElementValidity($el) { 
    // some logic. return true or 
    // object describing an error. 
    // if valid, return false. 
}

function displayValidationError($el, err) {
    // logic to display it.
}

function handleChange(evt) {
   // stop progagation.
   var $el = $(evt.target);
   var result = checkElementValidity($el);
   // depending on result
   displayValidationError($el);  
}

function validateAllElements(){
   var elems = [this.$el.find("#id-1"), this.$el.find("#id-2") ...];
   var isValid = true;
   elems.map(function ($el) {return {$el: $el, res: checkElementValidity($el);})
        .filter(function (data) {return data.res;})
        .forEach(function (data) { isValid = false;
             displayValidationError(data.$el, data.res)});
   return isValid;
}

其他地方,

events: {
    'click #commentSubmit':'commentSubmitFun',
    'focusout #commUserName':'handleChange',
    'focusout #commUserMsg':'handleChange'
}

function commentSubmitForm(evt){
   // your logic
   var isValid = validateAllElements();
}

我没有使用Backbone,因此代码可能无法正常工作。然而,它确实说明了您可能采取的方法。具体实现由您决定,如果您愿意,可以将所有4个功能合并为一个。重要的是要意识到存在各自不同的问题。