Javascript中使用原型继承的事件处理

我试图在JavaScript中启用事件处理。这就是我到目前为止所做的：

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('onblur', this, false);
    this.elem.addEventListener('click', this, false);
    this.elem.addEventListener('change', this, false);
    console.log(JSON.stringify(this.elem.value));

}

function FormTitle(args) {
    Field.call(this, args);
}

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

Field.prototype.sendRequest = function () {

};

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

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

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

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

Field.prototype.handleEvent = function(event) {
    switch (event.type) {
    case "click": this.click(this.value);
    case "onblur": this.onblur(this.value);
    case "change": this.change(this.value);
    case "dblclick": this.dblclick(this.value);
    }
};

// inheritProtootype uses parasitic inheritance to inherit from the Field's prototype
// and then assign the results to FormTitle's prototype.
inheritPrototype(FormTitle, Field);

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

但是，由于某些原因，所有事件都是同时触发的。例如，当我单击表单中的标题字段时，所有四个事件都被触发，而不是仅单击事件触发

---

我做错了什么

简单。在每个

案例

块的末尾，用

分隔符将其与后续的每个块分开语句。
简单。在每个
案例
块的末尾，用
分隔符将其与后续的每个块分开语句。
在switch语句中，您需要在每种情况下都有一个
中断

switch (event.type) {
  case "click": this.click(this.value); break;
  case "onblur": this.onblur(this.value); break;
  case "change": this.change(this.value); break;
  case "dblclick": this.dblclick(this.value); break;
}

不需要最后一个中断，但最好将其包括在内，因为您可能会添加其他案例。
在switch语句中，您需要在每个案例后都有一个
中断

switch (event.type) {
  case "click": this.click(this.value); break;
  case "onblur": this.onblur(this.value); break;
  case "change": this.change(this.value); break;
  case "dblclick": this.dblclick(this.value); break;
}

不需要最后一个中断，但最好将其包括在内，因为您可能会添加其他案例。
您的
开关
语句遗漏了一些
中断
语句，因此在
单击时，将执行所有四种方法

但是，有一个比
开关
-语句更好的选项：

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

这将适用于所有事件，而不明确提及它们。
您的
开关
语句遗漏了一些
中断
语句，因此在
情况下，单击
将执行所有四种方法

但是，有一个比
开关
-语句更好的选项：

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

这将适用于所有事件，而不明确提及它们。
this.elem.addEventListener（“…”，this，false）
是否将
字段
实例作为事件监听器附加到一个对象-它需要是一个函数？
this.elem.addEventListener（“…”，this，false）
是否将
字段
实例作为事件侦听器附加-哪些需要作为函数？您的答案是正确的。我不知道我在想什么！但伯吉的说法似乎比switch的说法更优雅。所以我选择了这个作为答案。顺便问一下，您知道为什么“onblur”事件可能不会触发吗？@user可能是因为在使用侦听器注册时，您忽略了“on”。因此，尝试一下addEventListener（'blur'，…）仅限。好的，这样模糊就可以工作了。但最后一个问题。它（模糊）似乎被触发多次，包括当我第一次集中在领域也。当我切换窗口时，它也会被触发。你知道解决方法吗？@用户抱歉，我不知道答案。不过，切换窗口部分似乎是合法的，因为在退出浏览器焦点时，字段实际上是模糊的。然而，当聚焦场时触发事件是不寻常的……你的答案是正确的。我不知道我在想什么！但伯吉的说法似乎比switch的说法更优雅。所以我选择了这个作为答案。顺便问一下，您知道为什么“onblur”事件可能不会触发吗？@user可能是因为在使用侦听器注册时，您忽略了“on”。因此，尝试一下addEventListener（'blur'，…）仅限。好的，这样模糊就可以工作了。但最后一个问题。它（模糊）似乎被触发多次，包括当我第一次集中在领域也。当我切换窗口时，它也会被触发。你知道解决方法吗？@用户抱歉，我不知道答案。不过，切换窗口部分似乎是合法的，因为在退出浏览器焦点时，字段实际上是模糊的。然而，当聚焦场时触发事件是不寻常的……是的，这就像一个符咒。顺便问一下，你知道为什么“onblur”事件没有触发吗？@user:因为事件名为
blur
：-）on
前缀上的
仅用于M$
。attachEvent
和事件属性。@user这种事件处理方法肯定比
开关
好。为了解释这段代码的作用：关键字
中的
检查左侧表示的属性是否存在于右侧指定的对象中。JavaScript允许访问“点表示法”和索引表示法中的属性。使用索引表示法，可以通过变量动态访问对象的属性。这种有效的方法允许在不修改列表的情况下简单地扩展事件。@顺便说一句，索引表示法与点表示法有些不同。此外，索引并不是一个很合适的词，因为表示法的工作原理类似于地图。基本上，任何东西，包括对象，都可以用作键。这也意味着您可以拥有名为
foobar
的属性，这对于点表示法来说是不可能的。所以这是一个很好的特性…@Derija93：这种类型的成员操作符被命名（只有数字我才称之为索引）。不，它只对字符串有效；你传递的每一件东西都是含蓄的严格的是的，就像一个符咒。顺便问一下，你知道为什么“onblur”事件没有触发吗？@user:因为事件名为
blur
：-）on
前缀上的
仅用于M$
。attachEvent
和事件属性。@user这种事件处理方法肯定比
开关
好。为了解释这段代码的作用：关键字
中的
检查左侧表示的属性是否存在于右侧指定的对象中。JavaScript允许访问“点表示法”和索引表示法中的属性。使用索引表示法，可以通过变量动态访问对象的属性。这种有效的方法允许在不修改列表的情况下简单地扩展事件。@顺便说一句，索引表示法与点表示法有些不同。此外，索引并不是一个很合适的词，因为表示法的工作原理类似于地图。基本上，任何东西，包括对象，都可以用作键。这也意味着您可以拥有名为
foobar
的属性，这对于dot来说是不可能的