window.event.srcElement.options NOT Work on FF

Question

window.event.srcElement.options(window.event.srcElement.selectedIndex).value only work on IE. How do it work both IE and FF?

Answer 1

var addEvent = (function() {
function addEventIE(el, ev, fn) {
    return el.attachEvent('on' + ev, function(e) {
 return fn.call(el, e);
    });
}
function addEventW3C(el, ev, fn) {
    return el.addEventListener(ev, fn, false);
}
return window.addEventListener ? addEventW3C:addEventIE;
})();

var domRef = document.getElementById('foo');

addEvent( domRef, 'change', function(e) {
    e = e || window.event;
    var el = e.target ? e.target : e.srcElement,
        value = el.value;
    alert( value )
});

in IE, event is a property of window, in modern DOM supporting browsers it's passed as the first argument.

Answer 2

There are two approaches: Assume there is markup "< SELECT name="ddlQuery" id="ddlQuery" style="width:273px;" onchange="GetDropDownValue(event)">...." on HTML

one using js function function GetDropDownValue(e)

    {
        var rtnVal = "";
        var sel = document.getElementById(getTargetID(e));
        for (var i = 0; i < sel.options.length; ++i) {
            if (sel.options[i].selected == true) {
                rtnVal = sel.options[i].value;
                break;
            }
        }
        alert(rtnVal);
        return rtnVal;
    }

another using jQuery: $('#ddlQuery').val()

Answer 3

event.target.options[event.target.selectedIndex].value. Though as always with events you'd have to have passed the event object into a function, so eg.:

<script>
    function selectChanged(event) {
        var target= event.target || event.srcElement;
        doSomethingWith(target.options[target.selectedIndex].value);
    };
</script>

<select onchange="selectChanged(event)">...</select>

Setting the handler directly and using this may be easier:

<select id="x">...</select>

<script>
    document.getElementById('x').onchange= function() {
        doSomethingWith(this.options[this.selectedIndex].value);
    };
</script>

Note that looking at options[selectedIndex] is for compatibility with older browsers. These days you can usually just get away with saying select.value.

Answer 4

There is no global event object in Firefox. Events are passed to their handlers as an argument. Also, instead of srcElement, you look for target.

If you use a javascript library like jQuery, all the browser specific quirks are handled for you.

Otherwise, I suggest you to read these articles

• http://www.quirksmode.org/js/introevents.html
• http://www.quirksmode.org/js/events_properties.html

Answer 5

IE uses srcElement where most other browsers (including Firefox) use target.

Also, Firefox passes around event objects, whereas IE just populates the global event object w/the current event's data.

You'll have to handle both in your code. How you handle the 2nd one will depend on how you're assigning the handler.

But here's one way.

function changeHanlder( event )
{
  var elem = event.target || event.srcElement;
  alert( elem.options[elem.selectedIndex].value );
}

It's also worth noting that all the modern javascirpt libraries handle this abstraction for you.

Answer 6

Sorry I forgot Function getTargetID(e) function getTargetID(e) {

        if (!e) { var e = window.event; }
        var objTarget = e.srcElement ? e.srcElement : e.target;
        return objTarget.id;
    }

Answer 7

Firefox uses e.htmlEvent.target.nodeName

you can use try/catch to handle both browsers.