js事件不同写法的处理方式是什么？

学习js事件时，有三种不同的写法，第一种

<button id="btn" onclick="aa(dianji(),1000)">点击</button>

<script>
 function dianji() {  
        console.log("点击")
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
</script>

第二种

<button id="btn" >点击</button>
<script>
    function dianji() {
        
        console.log("点击")
       
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
    let a = document.getElementById("btn")
    a.onclick = aa(dianji, 1000);
    
    // console.log(timer)
</script>

第三种

 <button id="btn" >点击</button>
<script>
    // 节流
    function aa1(fn,delay){
        let valid = true;
        return function(){
            if(!valid){
                return  false;
            }
            valid = false;
            setTimeout(function(){
                fn();
                valid = true;
            },delay)
        }
    }
    function dianji() {
        
        console.log("点击")
       
    }
    // 防抖
    function aa(fn, delay) {
        let timer = null
        // console.log(timer)
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay)
        }
    }
    let a = document.getElementById("btn")
    // a.onclick = aa(dianji, 1000);
    a.addEventListener("click",aa(dianji,1000))
    
    // console.log(timer)
</script>

我想实现一下点击事件的防抖效果，但是直接在button标签中加点击事件没有效果。第一个问题：第一种写法哪里有问题？应该怎么改正？第二个问题：这三种写法是不是在运行的时候有区别？区别是什么？希望有人解答一下