How does jQuery.click () work behind the scenes?

Question

This question is just out of curiosity. I want to know how jquery.click () works behind the scenes.

For example, if I create a button:

<input type="button" id="myButton" value="Click me!" />

Then I have the following jquery code:

$('#myButton').click( function() {
    alert("I have been clicked.");
});

How does jquery do this so that my function is called when a button is clicked?

At first I thought it would add an attribute onClick=""to the button tag, but when I checked the page with Firebug, I just saw:

<input type="button" id="myButton" value="Click me!" />

So what does jquery do behind the scenes?

Answer 1

It depends on the browser.

If you use a browser that supports it addEventListener(), it will add a handler using this.

, , / event, DOM jQuery12345... jQuery.cache .

, , :

jQuery1296081364954: 1

, jQuery.cache, .

console.log(jQuery.cache[1]);

..., :

{
   events:{
      click:[
         { /* object containing data relevant to the first click handler */ }
      ]
   },
   handle:{ /* this may be what initially gets called. Not sure. */ }
}

jQuery , , . , , .

Answer 2

DOM, , onClick(). , , , .

Answer 3

the function is attached to the onclick event in your input, but does not use the html declaration, but just javascript. Instead of looking in the html code, look at the DOM tab in firebug, you should find it there.

In simple javascript like this

    document.getElementById('myButton').addEventListener('click',function () { alert('hello!');},false);