JavaScript event listener for non-input elements

Question

Possible Duplicate:
Is there a jQuery DOM change listener?
How do can watch DOM Object properties?

Is there a way to bind events to non-input-type elements? For example, binding an event to an anchor element that fires when the href attribute is changed.

Are you talking about img and script elements? If you change their src, they should trigger a load event after the new url is loaded. — bfavaretto, Dec 10 '12 at 17:17
Ok - changed my example as I'm actually not dealing with src and can't use that solution. — James Jones, Dec 10 '12 at 17:21
In that case, you're pretty much stuck with polling in today's world. — T.J. Crowder, Dec 10 '12 at 17:27
I totally forgot you can bind click/mousemove to almost any kind of element. Need more coffee :) My question would probably be more useful if I concentrated on the change event, which was my original interest. — James Jones, Dec 10 '12 at 17:35

score 3 · Answer 1 · edited May 23 '17 at 12:21

You can bind handlers to all kinds of events on non-input elements (click, mousemove, etc.). But there is no (consistent cross-browser) event raised when an attribute changes (such as your example of an href attribute on a link). Some attributes (like src) will cause an event (like load) as a secondary thing, as bfavarello pointed out.

(There's a now-dead proposal for "mutation" events on elements, including attribute changes [mutations], but it was never broadly supported. There's a newer proposal, but it is also not [yet] broadly supported.)

You can, of course, use polling: Save the old value, and check back periodically (via setTimeout or setInterval) to see if it has changed. Unless you're checking a lot of elements and need to check them near-constantly, this needn't be a performance problem.

mikemaccana · Answer 2 · 2012-12-10T17:45:54.787

3

DOM Mutation Observers can do this, but they're very new and not well supported at the time of writing.

Are you writing an extension or similar (ie, you don't control that code that's modifying the DOM)? That's one of the more common use cases for these events - where you don't control the code that's changing the DOM. I've used this before with the Mutation Summary which has worked well in Chrome.

If you do control the code that's modifying the DOM - ie you're modifying the attribute yourself on your own web site - you might wish to simply fire off a custom event of your own when you modify the attribute.

edited Dec 10 '12 at 17:45

answered Dec 10 '12 at 17:17

mikemaccana

110,530
99
389
494

That's the thing I was thinking of! – T.J. Crowder Dec 10 '12 at 17:17
Pretty good idea, but I don't have control over the code that's modifying the attribute, thus I cannot fire an event. – James Jones Dec 10 '12 at 17:23
Then go load Mutation Summary. That's what it's for! – mikemaccana Dec 10 '12 at 17:25

score 1 · Answer 3 · answered Dec 10 '12 at 17:16

You could add a DomSubtreeModified listener to an ancestor, or you could use watch on the src property of the DOM object if it is supported in the browser you are using.

myImage.watch("src",function(id, oldval, newval){
    document.write("src changed!");
    return newval;    
});

JavaScript event listener for non-input elements

3 Answers3