I ran into a weird situation debugging somebody's code. The code below is a demonstration of the issue.
My impression is that event
should be undefined
when entering the event handler. It's like that in Firefox but in Chrome and IE11 event
is not undefined
, instead containing the event object. My guess is that a closure is in effect somehow but not when in Firefox.
Which way is it supposed to work? Where does the blame for the inconsistency lie (jQuery? Firefox? Chrome/IE11?)?
$('button').on('click',function(){
var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
$(event.target).css({backgroundColor:color});
$('body').css({backgroundColor:color});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click me!</button>