为什么在外部文件中使用内联代码不起作用，但在使用函数时起作用

Question

I know the title of question maybe not be understood, but I will explain that.

Everyone know we can use any of the following way.

Example(1)

document.getElementById('idofelement').onsubmit = function() {
   alert('Go ahead');
   return false;
}

Example(2)

function DisplayMsg(){
   alert('Go ahead');
   return false;
}

// and in HTML
<form action="file.php" method="post" onsubmit="return DisplayMsg();">

My question (1):
What is the difference between the two ways or two examples

My question (2) :
Why the example (1) not work in external JavaScript file, but work with me when it is inserted near by the target HTML code. While the example (2) work in any place Whether in external file or near by the target HTML code.

Answer 1

You should always call the method getElementById after the document is loaded. So as suggested by @JanDvorak you should wrap that by $.ready() using jQuery. And if you are not, use window.onload = function() instead.

btw: don't forget semicolon after definition of function, IE is vulnerable to this syntax