Matching anonymous functions to the event behind the scenes?

When I do

<a onclick='foo()'></a>

According to firebug - it creates anonymous function

l开发者_运维技巧ike this :

function onclick(event) { foo(); } 

But how does he knows how to attach those both to each other ?

( maybe the click came from DIV and not from this A )

I'm missing this point...

Can I please have some Explanation ?

When you do <a onclick="foo()"></a>, you should be beaten with a dirty stick. Repeatedly.

Anyway, this line bind an anonymous function to the DOM node. Each DOM element has them. Inspect your page an you will see all the properties which each dom element has.

Instead of mixing you layers of web ( JS code has no place in HTML ) , you should attach the events from an external JS file, which you include right before </body>. In addition to making the page load faster on older browers, this will effectively place all the content of that file in onDomReady event.

Please read more about how to attach events here : http://www.quirksmode.org/js/events_advanced.html

Each element has a set of default properties of methods. When an user changes a property/method, the browser is smart enough to remember this change.

Similarly, multiple functions with the same name can exist in JavaScript:

function a(){
   this.same_name = function(){
       return "a";
   } 
}
function b(){
   this.same_name = function(){
       return "b";
   }
}