js 小问题，不知道为什么

Question

好久不写js今天写了一个很简单的js，但是遇到一个问题

function add() {
        console.log(11111);
    }

    // $('#wxShow').click(Show());
    $('#wxShow').click(add());

如上代码，我捆绑id以后按道理只有点击id的dom才会触发add()但是现在我加载的时候就会触发，但是换成

 // $('#wxShow').click(Show());
    $('#wxShow').click(function(){
        alert("段落被点击了。");
    });

又恢复正常了，只有点击时才会触发

没有想明白，是我混淆语法了？？？

Answer 1

仔细看下面2句的区别
$('#wxShow').click(add());
$('#wxShow').click(add);

Answer 2

click的参数是一个函数，add()相当于返回了undefined，然后传递给了click

Answer 3

确实是个很小的问题，具体什么原因看下代码拆解，你就知道了

第一个：

function add(){  }
$('xxx').click(add())
// 上面的代码转换下
let add = function(){ /* add */ }
$('xxx').click(add())
// 在转换下
$('xxx').click(function(){/*add*/}())

上面的 几种写法，都是会被执行，这是因为你把函数调用了， 那么再换种形式就可以然他不执行，如下：

// 去掉调用的 ()
function add(){  }
$('xxx').click(add)
// 上面的代码转换下
let add = function(){ /* add */ }
$('xxx').click(add)
// 在转换下
$('xxx').click(function(){/*add*/})

所以，第二种形式的写法，这里都不需要解释了，因为第二种是第一种的 一个方式而已