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

Question

这是我创建的验证函数：

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

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

每当触发聚焦事件时，都会调用此验证函数：

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

现在我想调用相同checkValidation内部功能commentSubmitFun是这样的：

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

但是，如何将e.target传递到checkValidation函数中？

Answer 1

当您的commentSubmitFun在点击时被调用时，该event也会被传递。 如果您打算调用checkValidation内commentSubmitFun ，你可以传递event对象作为参数传递到您的checkValidation电话。

不过，老实说，我建议重构您的checkValidation函数以将String data作为参数。 这样，无论何时调用checkValidation ，都必须传入要显式检查的数据。

Answer 2

我同意@wmock的回答。 但是我认为最好用代码添加一个新答案。

由于您已经具有checkValidation函数，希望将Event对象e作为参数，因此只需将e传递给它以使其起作用。 因此，当您需要在commentSubmitFun()调用checkValidation时，只需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);
}

Answer 3

首先，这里有三个独立的问题

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

在最简单的情况下，您可以摆脱四种功能，

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个功能折叠为一个。 重要的是要意识到存在着另外的担忧。