Modifying the event object in Javascript

Question

In Javascript, the common understanding is that you shouldn't modify objects you don't own. I understand and agree with the arguments. Dispite that, I am considering to add a couple of properties the Event object. First I'll write a little background as well as what the implications will be and and after that I'm hoping to get some intelligent feedback from you, with pro's and con's.

I have written an event-manager, which have methods like addEvent, removeEvent, etc. When events are fired, I'll call handlers, passing on the event object to the event-handlers passed in when eventlisteners has been registered.

Before passing on the event object, I will add a couple of properties to the event-object. For instance; "hotKey" - with possible values such as "shift-c", "alt-d" or "meta-a". (The last one corresponds to "ctrl-a" on Window and "cmd+a" on MacOS, etc. In other words, depending on OS it will match correctly and the handlers logical pattern doesn't need to care about whether it's on which OS or what meta-key it is)

The implications is that the handlers code get smaller thanks to the fact that all the needed "if-then" statements has been executed by the event-manager, when for instance when key-related events has been fired. The event-handler pretty much needs to have an switch-statement and do the fun stuff.

Besides the hotKey-property, I am planning to add some other properties as well, mostly to simplify the event-handler functions and thereby eliminate commonly executed logic by event-handlers. In order to avoid naming colissions, I might add the new properties in a sub-ojbect. In other words, the properties does not need to be top-level properties.

I'm implementing this at the moment but I'm hoping to get insights I might not have been thinking of.

ADDITION

The question is what other people think of the implementation below. This requires that the event-object, that is passed to the handler, needs to modified. I am asking the question since I'm actually modifying an object that I don't own...but in this case there are advantages of doing so.

addEvent( document, "keyup", function(event) {
    switch (event.hotKey) {
        case 'meta-c':
            // code here
            break;
        case 'meta-a':
            // code here
            break;
    }
});

If you're just asking if it's ok to modify the event object, I think this is belongs to codereview — Esailija
– Esailija, Commented Jan 21, 2012 at 12:42

Otávio Barreto · Accepted Answer · 2017-03-22 20:02:19Z

2

Hi Hakan you are also here :)

Try create your own event object and then send it using the trigger() function.

Example

//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
 
// trigger an artificial click event
jQuery( "body" ).trigger( e );

Trigger

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

All examples are on those links.

edited Mar 22, 2017 at 20:02

answered Mar 22, 2017 at 19:16

Otávio Barreto

1,5683 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael L. Over a year ago

To protect your answer from link rot or changed content, please include the relevant portions of the linked content in your answer.

Ledorub · Accepted Answer · 2022-02-05 10:21:22Z

The drawback of your solution is that you tied the user to your implementation of event.hotKey. If another library adds it's own implementation of event.hotKey which does a completely different thing than yours, the user who tries to use them both will get some hard to debug problems.

Instead of altering the event object itself, you should provide the functionality separately:

function MyEvent(event) {
  var myEvent = clone(event);
  myEvent.hotKey = ...
  return myEvent;
}

addEvent( document, "keyup", function(event) {
    switch (MyEvent(event).hotKey) {
        case 'meta-c':
            // code here
            break;
        case 'meta-a':
            // code here
            break;
    }
});

If you don't like the fact that the handlers have to wrap the event, then you can change the listening function:

function myAddEvent ( target, type, handler, capture, scope) {
  var myHandler = function(event){
    handler.call(scope,MyEvent(event));
  }
  addEvent(target, type, myHandler, capture);
}

*this is just a draft solution, you still need to consider unlistening and other aspects

Collectives™ on Stack Overflow

Modifying the event object in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related