How do I move this JavaScript event from an inline event to its own .JS file?

Question

Hello all. Happened across a snip of JS that I've managed to make work for my uses, but as I'm brand new to javascript, I'm unsure whether I've understood how & why it works. As it stands, it's inline (inside an html tag, but I'd like to see it either in its own .js file so it can be used by several thousand links on one of several hundred pages on the site I'm putting together.

The purpose of the javascript I was looking for was to kill or disable a link (and only that link) on a page after it had been clicked once. I didn't want it to disappear, as I'd seen mention of, just be made un-clickable.

Anyway, this is what I found. Assistance is appreciated.

<A HREF="testvid.AVI" onclick="this.onclick=function(){return false;}"><DIV ID="BOX1">This is a video file</DIV></A>

Again, the question is, how to take that onclick event & place it in its own .js file. Thank you.

Answer 1

With plain js you can use the same code:

document.getElementById('videoLink').onclick = function() { this.onclick = function() { return false; } }

With jQuery you can try:

$("#videoLink").one('click', function() {
   $(this).click(function() {
        return false;
   });
});

UPD:

<A HREF="testvid.AVI" id="videoLink"><DIV ID="BOX1">This is a video file</DIV></A>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="filename.js"></script> 

filename.js

$(function() {
    $("#videoLink").one('click', function() {
       $(this).click(function() {
            return false;
       });
    });
});