Windows.event is undefined -Javascript error in firefox

Question

I'm using javascript to change some settings of asp button on mouseover. It is working in IE. But not working in Firefox. Is there any other javascript code that will support almost all browsers? My code is as follows

<script type="text/javascript">
        var previousColor;
        function Changecolor() {
            previousColor = window.event.srcElement.style.backgroundColor;
            window.event.srcElement.style.backgroundColor = "Blue";
            window.event.srcElement.style.cursor = "hand";
        }
        function RestoreColor() {
            window.event.srcElement.style.backgroundColor = previousColor;
        }
</script>


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor();" onmouseout="RestoreColor();" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />

Answer 1

Take a look at the Mozilla Developer Center docs on events. In Internet Explorer, the global event object is created when an event is fired. In standards compliant browsers, the event object is passed as the first argument of the function assigned to the firing event. If your event is defined in the HTML, the event object is created under the variable name event and can be passed to the functions you're calling.

Also note that the event.srcElement property is IE only and most other browsers use event.target instead.

Taking this into consideration, your function should look like this:

<script>
        var previousColor; 
        function Changecolor(evt) {
            var srcEl = evt.srcElement || evt.target;
            previousColor = srcEl.style.backgroundColor; 
            srcEl.style.backgroundColor = "Blue"; 
            srcEl.style.cursor = "pointer"; 
        } 
        function RestoreColor(evt) {
            var srcEl = evt.srcElement || evt.target;
            srcEl.style.backgroundColor = previousColor; 
        } 
</script> 


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor(event);" onmouseout="RestoreColor(event);" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />

Answer 2

Why don't you use CSS (with its :hover pseudoclass) instead of JS?

But if you need to use JS for some reasons just pass reference to the element as function parameter:

function Cangecolor(ref){
  prevousColor = ref.style....;

...

onmouseover="changecolor(this)"

Right now your code doesn't work because IE uses different Event Model (good browsers uses W3C Event Model, but IE uses its own). You can read about W3C/IE event models at: How to equalize the IE and W3C event models]

Answer 3

You don't need to bother with the event object. Also, the correct value for the cursor CSS property is "pointer" rather than the IE-specific "hand", unless you need to support IE 5 or 5.5.

<script type="text/javascript">
        var previousColor;

        function changeColor(el) {
            var s = el.style;
            previousColor = s.backgroundColor;
            s.backgroundColor = "Blue";
            s.cursor = "pointer";
        }
        function restoreColor(el) {
            el.style.backgroundColor = previousColor;
        }
</script>


<asp:Button ID="btnSearch" runat="server" BackColor="#800000"
    Font-Bold="True" Font-Names="Arial"
    onmouseover="changeColor(this);" onmouseout="restoreColor(this);"
    ForeColor="White" Height="28px" OnClick="btnSearch_Click2"
    Text="Search Jobz" Width="117px" />