While this may work perfectly fine in an unprotected environment,
adding event handlers like this may cause Caja to strip them out of the
final output in many containers or sites. Although restrictions are
imposed on the server-side cajoler that runs when the code first loads,
the client-side sanitizer that runs against code inserted after the
initial load—such as through an
innerHTML call—is much stricter about what
code it allows through.
The practice of not embedding events in markup is especially
valuable when you are obtaining content from another source, such as
events, and then you attempt to load it into the existing content
innerHTML call. In most
AJAX return value, leaving you with a nonfunctional node structure. In
this case, once an AJAX request returns, you can immediately file off a
function to assign click handlers to required DOM nodes.
There are a few methods you can employ to attach event handlers to
DOM nodes. In Caja’s early days, when the
onclick method was restricted, using
attachEvent (depending on the browser) was one of the best options ...