函数为什么只执行了一次？

Question

通过 addeventListener（） 添加的函数只执行了一次？

---

···

       box1.addEventListener('mouseover',test(2));
       function test(i){
           console.log(i);
       }

···

为什么一打开网页控制台就输出 2 并且再次将鼠标悬停在上面的时候并不会输出 2

---

如果代码这样写：

···

       box1.addEventListener('mouseover',test);
       function test(){
           console.log(2);
       }    

···

一打开网页并不会直接输出 2 而是当鼠标悬停在该盒子上才输出，并且每次悬停都会输入一个 2，在这里 test（i） 和 test 有什么区别？

Answer 1

这样写是否可以帮助理解？

var test = function(i) {
    console.log(i);
};

var result = test(2);//result其实是undefined

box1.addEventListener('mouseover', result);//每次mouseover都尝试调用一个undefined？说白了，有个屌用！

而第二种是：

var test = function() {
    console.log(1);
};

box1.addEventListener('mouseover', test);//test是函数本身嘛，于是就有了每次mouseover都调用test函数的结果

补充：

想传递参数怎么办？

方法一

玩个闭包？

var test = function(i) {
    return function() {
        console.log(i);
    };
};

box1.addEventListener('mouseover', test(2));//每次mouseover都会输出2

使用bind方法(不推荐)

var test = function(i) {
    console.log(i);
};

box1.addEventListener('mouseover', test.bind(null, 4));//每次mouseover都会输出4

Answer 2

element.addEventListener(event, function, useCapture);

function 必须。指定要事件触发时执行的函数，不要跟括号。
这里说的是指定一个函数，你的第一种写法test()是函数调用，就是js执行到到这儿及执行函数，返回结果后即销毁。没有实现监听后执行。
应使用第二种方式，函数名相当于一个指针，指向一个地址。匿名函数也可以。
不加括号传参相当于传入函数整体，addEventListener在监听到事件时会去调用它。

Answer 3

带()就调用了.直接执行.

Answer 4

简单来说第一个就是当代码解读到test（2），下面的函数已经被执行了。根据js的垃圾回收机制，第二次触发时函数这个时候已经不存在了。所以就无法调用。
第二个是当事件被触发时，函数的指针才会指向函数，调用一次，被回收。再触发，再调用。