Question

我使用以下代码jsFiddle：

function Field(args) {
    this.id = args.id;

    this.name = args.name ? args.name : null;
    this.reqType = args.reqType ? args.reqType : null;
    this.reqUrl = args.reqUrl ? args.reqUrl : null;
    this.required = args.required ? true : false;
    this.error = args.error ? args.error : null;

    this.elem = document.getElementById(this.id);
    this.value = this.elem.value;

    this.elem.addEventListener('blur', this, false);
    this.elem.addEventListener('focus', this, false);
}

// FormTitle is the specific field like a text field. There could be many of them.
function FormTitle(args) {
    Field.call(this, args);
}

Field.prototype.getValue = function() { return Helpers.trim( this.value ) };

Field.prototype.blur = function (value) {
    alert("blur");  
};

Field.prototype.focus = function (value) {
    alert("focus");  
};

Field.prototype.handleEvent = function(event) {
    var prop = event.type;
    if ((prop in this) && typeof this[prop] == "function")
        this[prop](this.value);
};

inheritPrototype(FormTitle, Field);
var title = new FormTitle({name: "sa", id: "title"});

function inheritPrototype(e, t) {
    var n = Object.create(t.prototype);
    n.constructor = e;
    e.prototype = n
}

if (!Object.create) {
    Object.create = function (e) {
        function t() {}
        if (arguments.length > 1) {
            throw new Error("Object.create implementation only accepts the first parameter.")
        }
        t.prototype = e;
        return new t
   }
}

问题是每次调整字段时都会触发'blur'事件，这与您期望的相反。尽管在代码中甚至没有提到焦点事件。问题是我无法在jsFiddle中复制这个问题，但问题出现在IE中。

另外，在jsFiddle上，还有另一个问题。焦点事件被多次触发......

对此和/或解决方案是否有可能的解释？

更新

奖金问题（最后一点，承诺）。我添加了一个函数addEvent来动态地将事件添加到表单字段，而不是直接在父构造函数中添加它们。这是它的jsFiddle。我试图调用该函数但它似乎不起作用。我可能做错了什么？

Answer 1

alert处理程序中的focus会在获得焦点后立即将焦点移离字段。失去焦点会触发blur。奇怪的是blur是第一位的。

如果您将警报更改为console.log（或不会窃取焦点的内容），您会看到事件正确触发。

http://jsfiddle.net/rsKQq/4/

在焦点上触发模糊事件

更新

1 个答案: