测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        let btn = document.getElementById("btn");
        btn.onclick = () => { // 钩子函数
            console.log('我是钩子函数');
        }

        btn.addEventListener("click",() =>{ // 回调函数
            console.log('我是回调函数');
        });
        // 这是给btn绑定了一个监听器，后面那个函数是它的回调函数，
        // 因为消息捕获的过程我们并不能参与，而在捕获执行完毕的时候，
        // 回调函数才会执行，我们可以把对消息的处理写在回调函数里。
    </script>
</body>
</html>

点击按钮后代码输出如下：

JS中钩子函数与回调函数的区别_html

回调函数和钩子函数的区别根本上是

钩子函数在捕获消息的第一时间就执行，而回调函数是捕获结束时，最后一个被执行的。

什么是钩子函数

一般认为，钩子函数就是回调函数的一种，其实还是有差异的，差异地方就是：触发的时机不同。
钩子（Hook）概念源于Windows的消息处理机制，通过设置钩子，应用程序对所有消息事件进行拦截，然后执行钩子函数。 

什么是回调函数

回调函数其实是调用者将回调函数的指针传递给了调用函数，当调用函数执行完毕后，通过函数指针来调用回调函数。

钩子函数和回调函数都是事件处理函数