CODEWITHSUNDEEP
javascriptdom-events
Alex Angas
Alex Angas

Reputation: 60047

How do I replace an inline JavaScript event handler?

I'd like to use JavaScript only (no jQuery) to replace an inline onmenuclick event handler generated by a third party control with my own.

The custom control has added the following HTML to the page:

<ie:menuitem
  menugroupid="200"
  description="Create a site for a team or project."
  text="New Site"
  onmenuclick="if (LaunchCreateHandler('Site')) { STSNavigate('\u002fsites\u002fsd\u002f_layouts/newsbweb.aspx') }"
  iconsrc="/_layouts/images/newweb32.png" type="option" id="zz4_MenuItem_CreateSite"></ie:menuitem>

I'm trying to replace the onmenuclick handler with:

var createSiteMenuItem = document.getElementById('zz4_MenuItem_CreateSite');
if (createSiteMenuItem)
    createSiteMenuItem.onmenuclick = function () { alert('Hello!'); }

The original handler still fires! I'm making sure the script runs after the document has loaded.

Is this the correct approach?

Upvotes: 1

Views: 1958

Answers (3)

Alex Angas
Alex Angas

Reputation: 60047

I've marked staticsan's answer as correct - onmenuclick is non-standard and that's why the problem is occurring. However the original resolution suggested wasn't quite right. This has since been corrected, but here's the back story for completeness...

I debugged this in Visual Studio and could see that onmenuclick is recognised as an expando instead of an event. This means attachEvent and addEventListener do not apply and fail when used.

VS debugger of this code

The resolution was far more simple. I changed the casing to that shown in the Visual Studio debugger so it read onMenuClick instead of onmenuclick. The "faux-event" now fired correctly.

Upvotes: 0

staticsan
staticsan

Reputation: 30565

The trouble is that directly assigning to onmenuclick is unreliable and non-standard. You need to use attachEvent() (IE) or addEventListener() (everyone else).

Edit:

As explained below, the actual problem was that in Javascript, element attributes are case-sensitive, despite the HTML, which isn't. So any reference to the menu click event in Javascript has to refer to it as "onMenuClick".

Upvotes: 1

Larry K
Larry K

Reputation: 49114

The id may be generated dynamically. So one time it is 'zz4_MenuItem_CreateSite' the next time it is something else. Way to check: observe the html source on multiple downloads, see if the ids vary.

This msdn article seems to point in that direction.

Suggestion: wrap the menu items in a div with an id that you assign. Then walk the dom tree within your div to find the right element to modify.

Upvotes: 0

Related Questions