Calling a function in a script which is included twice in a page
===

Today, I read a question about **[the danger in including the same JavaScript library twice][1]**. I created a small project to test that with a simple alert in a function called on the click of a link. I used jquery to help me binding an event handler to the click like that:

***Case 1***

Javascript:

    $(document).ready(function () {
        $("#TestLink").click(function() {
            alert("Message");
        });
    });

Html:
    <script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
    
    <p>
       <a id="TestLink">Click here</a>
    </p>

Now, when I click on the link, the message is displayed twice. I understand that jquery bind an event handler twice because the reference to the script has been added twice.

In another case, I change the code to looks like that:

***Case 2***

Javascript:

    function showMessage() {
        alert("Message");
    }

Html:

    <script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
    
    <p>
       <a onclick="showMessage();" id="TestLink">Click here</a>
    </p>

When I click on the link, the message is just displayed once even if I included the script twice.

**My questions:**

In the case 1, how the process of binding an event handler twice is done when the same script is added more than once? I just want more details about the hook of events when a the same script is added more then once; articles, references, etc...

In the case 2, how the browser resolves the conflict having to choose which script to used for calling the function?

  [1]: http://stackoverflow.com/questions/4891278/what-is-the-danger-in-including-the-same-javascript-library-twice