Is it possible to detect if certain events are supported in certain browsers? I can detect if the browser supports document.addEventListener, but I need to know if it supports the event DOMAttrModified. Firefox and Opera support it, but Chrome and others do not.

Is it possible to detect if certain events are supported in certain browsers? I can detect if the browser supports document.addEventListener, but I need to know if it supports the event DOMAttrModified. Firefox and Opera support it, but Chrome and others do not.

• javascript
• event-handling
• dom-events
• detection
• browser-detection

• 1 I don't think it's possible however look here to see support for IE and Chrome as well: help.dottoro.com/ljdchxcl.php – Shadow Wizard Commented Dec 30, 2010 at 11:56
• Thankyou, however I already have working solutions for all browsers. I was hoping for a way to detect if certain browsers supported the event so I can apply my alternative methods. It seems I may have to resort to jQuery.browser detection. – Ben Commented Dec 30, 2010 at 12:08

2 Answers 2

Updated answer:

Yes, you can feature-detect this. Create an element, listen for the event, and change an attribute on the element. In my tests, you don't even have to add the element to the DOM tree, making this a nice, contained feature detection.

Example:

function isDOMAttrModifiedSupported() {
    var p, flag;

    flag = false;
    p = document.createElement('p');
    if (p.addEventListener) {
        p.addEventListener('DOMAttrModified', callback, false);
    }
    else if (p.attachEvent) {
        p.attachEvent('onDOMAttrModified', callback);
    }
    else {
        // Assume not
        return false;
    }
    p.setAttribute('id', 'target');
    return flag;

    function callback() {
        flag = true;
    }
}

Live copy

Firefox triggers the callback on all of the modifications above; Chrome on none of them.

Original answer:

You can feature-detect whether some events are supported, as shown on this handy page. I don't know if you can test specifically for that one, but if you can, that code may well get you started.

Update: I dumped Kangax's code into JSBin and tried it, doesn't look like that sniffing technique works for that event (unless I have the name spelled incorrectly or something; Firefox is showing "false"). But my technique above does.

function isDOMAttrModifiedSupported () {
    var supported = false;
    function handler() {
      supported = true;
    }
    document.addEventListener('DOMAttrModified', handler);
    var attr = 'TEST';
    document.body.setAttribute(attr, 'foo'); // aka $('body').attr(attr, 'foo');
    document.removeEventListener('DOMAttrModified', handler);
    document.body.setAttribute(attr, null);
    return supported;
  }