javascript - 如何避免在这种情况下修改事件对象

Question

这个问题与这个问题相关Autocomplete: first item focused only when the user type on tab key .

为了仅当用户使用 jqueryUi 在 tab 键上键入时才使第一个项目聚焦，可以做这样的事情 http://jsfiddle.net/uymYJ/8/ (1).

这个实现的坏处是修改了事件对象event.keyCode = $.ui.keyCode.DOWN;。
事实上，这样做会影响此事件的所有其他监听器:稍后运行的 keydown 事件的所有监听器(包括所有委托(delegate)的监听器)都会将 event.keycode 视为 $.ui.keyCode.ENTER.

我的问题是:

1. 我对修改事件对象的担心是否合理？如果不是，为什么？
2. 您能推荐另一种方法来达到同样的效果吗？
3. 按照@AaronDigulla 的建议，一个选择可能是使用document.createEvent()。在这种情况下使用这种方法的正确方法是什么？我确实尝试了以下代码 (3)，但它不起作用。

附言:
这是关于自动完成(2)的代码。

---

(1)

$("#box").keydown(function(e){
    if( e.keyCode != $.ui.keyCode.TAB) return;
    
   e.keyCode = $.ui.keyCode.DOWN;
   $(this).trigger(e);

   e.keyCode = $.ui.keyCode.ENTER;
   $(this).trigger(e);
    
   $(this).siblings("input").select();
});

---

(2)

function (e) {
    var f = typeof e == "string",
        g = Array.prototype.slice.call(arguments, 1),
        h = this;
    return e = !f && g.length ? a.extend.apply(null, [!0, e].concat(g)) : e, f && e.charAt(0) === "_" ? h : (f ? this.each(function () {
        var d = a.data(this, c),
            f = d && a.isFunction(d[e]) ? d[e].apply(d, g) : d;
        if (f !== d && f !== b) return h = f, !1
    }) : this.each(function () {
        var b = a.data(this, c);
        b ? b.option(e || {})._init() : a.data(this, c, new d(e, this))
    }), h)
}

---

(3)

$("#box").keydown(function(){

    e = document.createEvent('KeyboardEvent');
    e.initEvent("keydown", true, true);
    $(this).dispatchEvent(e);

    if( e.keyCode != $.ui.keyCode.TAB) return;
    
   e.keyCode = $.ui.keyCode.DOWN;
   $(this).trigger(e);

   e.keyCode = $.ui.keyCode.ENTER;
   $(this).trigger(e);
    
   $(this).siblings("input").select();
});

Answer 1

你是对的:事件将被修改，所有听众将看到修改后的键码。

但更重要的问题是:这危险吗？

要回答这个问题，我们需要知道哪些监听器绑定(bind)到该元素。当然，自动完成插件中的所有监听器都是为处理这种情况而设计的。对他们来说，这没问题。

当您将自己的事件绑定(bind)到小部件时，麻烦就开始了。

解决方案是创建新事件(使用 document.createEvent() + 复制所有重要属性)并发送克隆以避免修改原始事件。

一些链接:

• Keyboard Events and Codes (在您键入时显示事件的字段)
• KeyboardEvent来自 Mozilla 开发者网络
• jQuery.Event有帮助程序代码来创建和处理事件
• Understanding Keyboard Event Data来自动态 HTML:权威引用，2E。第 6 章:脚本事件