为什么这段代码click事件监听无效

Question

程序作用是input输入文字后，点击按钮，在divlist后新增一个div子节点。
但是这段代码直接运行了vivi()，而且点击btn无效。

html

<form action="">
  <input type="text" id="inputtext"/>
  <button id="btn">i</button>
</form>
<div id="divlist"></div>

js

 window.onload = function(){
        var btn = document.getElementById("btn");
        var inputtext = document.getElementById("inputtext");
        var divlist = document.getElementById("divlist");
        function vivi(){
            var newnode = document.createElement("div");
            newnode.innerHTML = "a";
            divlist.appendChild(newnode);
        }
    btn.addEventListener("click",vivi());

}

Answer 1

把 btn.addEventListener('click', vivi()); 改成

btn.addEventListener('click', vivi);

element.addEventListener参数是这样的

element.addEventListener(event, function, useCapture)

第二个参数是一个function对象，或者说是引用，vivi()是调用该函数的意思。
所以你的代码实际上是 btn.addEventListener('click', undefined);
因为vivi()方法调用后没返回任何东西

你可以试下

var forFun = function() {
    return function() {
        console.log('fun 233333');
    };
};
btn.addEventListener('click', forFun())

多试下就会明白了

Answer 2

btn.addEventListener('click', forFun())

这段代码中，回调函数加了括号相当于直接执行了forFun,而forFun这个函数又没有返回一个函数，所以addEventListener这个方法的第二个参数相当于没有传对，最后便挂掉了

Answer 3

不是这样的吗btn.addEventListener("click",vivi);

Answer 4

是这样

btn.addEventListener("click",vivi);

不是

btn.addEventListener("click",vivi());

Answer 5

不是的噢，()是运算符。不加才是传入了回调函数

Answer 6

btn.addEventListener("click",vivi());
第二个参数返回的是undefined，而这个参数需要的是一个函数引用，而不是一个函数运行后的返回值，
当然你也可以在函数里面返回函数，@hwencc回答的很详细

Answer 7

vivi去掉括号

Answer 8

把vivi()的括号去掉，效果参见：http://www.jscssshare.com/#/sample/onFQ5rpy