좋은 질문입니다. 질문한 분의 말처럼, 선언된  후 사용되는 것이 원칙이지요.
이 예제 역시 f() 함수가 선언된 이후에 f() 함수가 사용(호출)되고 있습니다. 다음 설명을 보세요.

웹페이지가 로딩될 때 아래의 부분을 만나면
<button onclick="f(event)">클릭하세요</button>

함수 f()를 호출하는 것이 아닙니다. onclick 속성에 그저 "f(event)"라는 코드를 등록하지요. 함수호출문이라는 것조차 해석하지 않습니다.
이것이 바로 스크립트 언어의 특징입니다. 실행 중에 오류가 있으면 실행이 중단되는 것이 스크립트 언어의 특징입니다.

그러고나서 내려가면 <script> 태그를 만나고 그곳에 함수 f()의 선언문을 보게 됩니다. 이제 여기서 함수 f()의 존재를 기억해 두겠지요.
그리고 웹페이지의 로딩이 완료되고 화면에는 웹 페이지가 출력됩니다.
그리고 사용자가 버튼을 누르지 않으면 함수 f()가 호출될 일도 없습니다.
만일 사용자가 버튼을 누르면 그때 버튼의 onclick에 등록해둔 코드를 실행합니다.
등록해둔 코드는 f(event)이고 함수 f()를 호출합니다.
함수 f()가 이전에 웹페이지 로딩시에 인지되었고, 함수 f()가 자연스럽게 실행됩니다.