Bug Tracker

Ticket #11125 (closed bug: invalid)

Opened 3 years ago

Last modified 3 years ago

jQuery.event.trigger throws exception when custom event name is same as DOM object property

Reported by: sigmaxis Owned by: sigmaxis
Priority: low Milestone: None
Component: event Version: 1.7.1
Keywords: Cc:
Blocking: Blocked by:

Description

I have code that fires/listens to a custom event named "action" on a normal DOM form object. Prior to jQuery 1.7 this causes no issues. In jQuery 1.7+, triggering the "action" custom event on the form object results in the following exception:

elem[type] is not a function

This is in jQuery-1.7.1.js line 3175.

 http://jsfiddle.net/fzbFf/

My understanding is that jQuery tries to run the native behaviour method (default handler) on the form object, assuming that the event name is going to refer to a method. In this case, however, the "action" event name ends up referring to the form's string "action" URL attribute.

The same error happens if I trigger a custom event named "length" on the form object. (Minor note: if the "length" value of the form is zero, as in the jsFiddle above, this may not reproduce, but it does in my real use case, when the "length" value is 4 - or any truthy value)

I can just switch to using a different custom event name as temporary workaround, but this seems like something that should be fixed.

NOTE: there is a bug (http://bugs.jquery.com/ticket/10574) that describes exactly the same line of code and the same resulting exception, but it was marked invalid because the submitter worked in an esoteric context. However, in this case I am using normal DOM object with a fairly normal custom event use case.

Thanks guys!

Change History

comment:1 Changed 3 years ago by rwaldron

  • Owner set to sigmaxis
  • Status changed from new to pending

How is this a bug?

Version 0, edited 3 years ago by rwaldron (next)

comment:2 Changed 3 years ago by sigmaxis

  • Status changed from pending to new

Are you referring to the fact that the inline Firebug frame shows no exception in your jsFiddle?

Here is a screenshot of the exception in my native Firebug:  http://imgur.com/Fue0P

In general, assuming that this is reproducible, would this constitute a bug? I expected to use that name for custom events with impunity, since HTML does not define an event named "action"...

comment:3 Changed 3 years ago by dmethvin

  • Status changed from new to pending

Do you need the event to bubble? If not you should be using .triggerHandler() anyway as the docs mention. Also, it's not a good idea to use generic terms for custom event names. Many of the MVC frameworks use a convention of an embedded colon for their custom event names, which won't conflict with present or future browser-defined events.

comment:4 Changed 3 years ago by sigmaxis

  • Status changed from pending to new

Thank you for the workaround suggestions.

That aside, it simply seems to be incorrect behaviour to invoke a property on a DOM object without first checking whether it is callable or not.

Back to workarounds: I need the event to bubble, so I'll look into embedding a colon into the event name for better namespacing and keep using .trigger().

I really hope this bug remains open, at least in low/very-low priority. This issue will not come up for most developers out there, but it is still a clear case of unchecked property invocation.

Thanks!

comment:5 Changed 3 years ago by sigmaxis

Sorry, forgot to mention:

Another course of action could be to add an extra note to .trigger() (et al) documentation that the event name will be used to invoke a DOM object property. Then at least this kind of error will not be a surprise.

comment:6 Changed 3 years ago by dmethvin

  • Status changed from new to pending

What would you suggest we add to the current documentation? There is already a note (well technically two) on the current page.

comment:7 Changed 3 years ago by rwaldron

An easier course would be to simply not use strings that are known DOM Node properties or element attributes . No one files a bug against JavaScript for not allowing the arbitrary use of break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in or try - that would be absurd right? Because you can just use a different word. The policy should be extended to host objects as well.

comment:8 Changed 3 years ago by sigmaxis

  • Status changed from pending to new

Fair enough, I just saw that note in the documentation. I had no idea that the custom event name is directly used to invoke a DOM object property.

That's why it did not occur to me to be cautious with overly-generic naming. You can see how to my ignorant self it did not seem absurd to use a normal noun that I knew to be not a *native DOM event* name, or even a known DOM method name.

But of course, knowing that .trigger() invokes any object property directly by design, I will be more cautious and use a prefix with colon.

Thanks!

comment:9 Changed 3 years ago by addyosmani

  • Priority changed from undecided to low
  • Resolution set to invalid
  • Status changed from new to closed
  • Component changed from unfiled to event

It looks like we can close this given that we already cover it adequately in our docs. @dmethvin, please feel free to add a needsdocs if you think we should be expanding on what we have any further :)

Note: See TracTickets for help on using tickets.