Geek Answers Handbook

How to avoid changing the event object in this situation

This question is related to this AutoFill: the first element is focused only when the user types a tab key .

To make the first element focused only when the user type on the tab using jqueryUi can do something like this http://jsfiddle.net/uymYJ/8/ (1).

The bad thing about this implementation is modifying the event object event.keyCode = $.ui.keyCode.DOWN; .
In fact, doing this will affect all other listeners on this event: the entire listener in the keydown event that was fired later (including all delegated listeners) will see the .key event code as $ .ui.keyCode.ENTER.

My questions:
1) Are my concerns about the modification of the event object justified? If not? 2) Can you suggest another way to achieve the same result?
3) One option suggested by @AaronDigulla might be to use document.createEvent() . What is the proper way to use this method in this context? I tried the following code (3), but it does not work.

PS:
Here is the autocomplete code (2).

(one)

 $("#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(); });
+3
source share
1 answer

You are right: the event will be changed, and all listeners will see the changed key code.

But the more important question is: is it dangerous?

To answer this question, we need to know which listeners are associated with the item. Of course, all listeners from the autocomplete plugin are designed to handle this situation. This is normal for them.

The problem starts when you bind your own events to widgets.

The solution is to create new events (using document.createEvent() + copy all the important attributes) and send a clone to avoid changing the original event.

Some links:

+1
source

More articles:


All Articles