1

on pressing a link, I am calling a javascript function

  <a id="eventFiringLink" href="javascript:functionName()">

and in another place of the code for a button I am binding the functionName() function as a listener for a click event.

 <button id="someButton">

binding click event by jquery

$("#someButton").bind('click',functionName);

and the function description is exactly like below.,

 functionName(e)
 {
      if(event.target.id== "eventFiringLink")
      {
          console.log("do this");
      }
      else
      {
          console.log("do that");
      }
 }

when I clicked the link, I thought that I would get

"TypeError: Cannot read property 'target' of undefined",

but to my surprise the code got executed and printed

"do this"

in the console.

How is that possible.?

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
Karthik Amar
  • 217
  • 5
  • 17
  • 2
    The code [doesn't seem to act](http://jsfiddle.net/w5xn69ju/) like you've described. Also you're not listening an event, hence no event object can be passed. Event object is not also passed automatically from inline attachments. – Teemu May 09 '15 at 10:57
  • sorry, Actually I forgot to mention that another place in the code, I am binding functionName as listener for a click event of a button.. – Karthik Amar May 09 '15 at 11:03
  • Thanks for taking time to look into it., I have now edited the problem description.. – Karthik Amar May 09 '15 at 11:07
  • Why do you think that the code would `TypeError`? – Davin Tryon May 09 '15 at 11:11
  • @DavinTryon that's what you'd get if `event` was `undefined` – CupawnTae May 09 '15 at 11:13
  • @CupawnTae Yes, so I guess what I'm asking is why he would think that `event` would *not* be set correctly when clicking the link. – Davin Tryon May 09 '15 at 11:14
  • I sill [can't reproduce](http://jsfiddle.net/w5xn69ju/2/) the described behavior, when clicking _the link_. Clicking the button logs "do that". – Teemu May 09 '15 at 11:16
  • @DavinTryon because the parameter is named 'e', so he's accessing the global `window.event` instead of the passed, jQuery-normalized `event` object – CupawnTae May 09 '15 at 11:16
  • @CupawnTae I see! :) Thanks. I completely didn't see that it wasn't referencing `e`. – Davin Tryon May 09 '15 at 11:17
  • so. it is global and can be accessed without passing it? is it cross browser compatible and would work in all browsers? – Karthik Amar May 09 '15 at 11:19
  • Yes, in some browsers, but not in Firefox for example. A global event object _was_ a feature in the legacy IE event handling model. At some point Chrome implemented it too. – Teemu May 09 '15 at 11:23
  • @KarthikAmar I dealt with that in my answer - the link goes into a lot of detail about browser support. But the bottom line is no, you can't rely on it, and that's why jQuery gives you a normalized version as a parameter – CupawnTae May 09 '15 at 12:11

2 Answers2

4

You're accessing the global window.event. Support for this object varies from browser to browser.

See http://www.quirksmode.org/js/events_access.html

The parameter passed by jQuery is normalized to avoid these browser inconsistencies, but as you realized, you weren't accessing that parameter, so you were getting the raw global event object instead.

CupawnTae
  • 14,192
  • 3
  • 29
  • 60
1

You are actually accessing the global object 's property here which is window. so when u access event it is actually window.event. But beware, modern browsers may not all support this as this is internal to browser's event handling mechanism and it's advisable to take the event as an argument. In fact, in most cross browser libraries the common method of accessing the event object is as below:

if(!e){ e = window.event; }
sujit
  • 2,258
  • 1
  • 15
  • 24