javascript中关于事件句柄EventListener的疑问记录

javascript中关于事件句柄EventListener的疑问记录

  
  
  
      
      
  
  
    
Hello
  
    按钮  
      
  
  

情况1：

x.addEventListener("click",hello);//句柄  
x.addEventListener("click",world);  
//x.removeEventListener("click",hello);  

在视频教学中，说此处的函数调用不用加()，此时运行的结果是：

点击按钮，会弹出消息框“hello",点击确定后，会再弹出对话框"world"。

情况2：

x.addEventListener("click",hello());//句柄  
x.addEventListener("click",world());  
//x.removeEventListener("click",hello);  

添加()后，此时运行结果是：点击按钮没有反应，然后点击刷新，会先弹出消息框“hello",点击确定后，会再弹出对话框"world"。

情况3：

x.addEventListener("click",hello);//句柄  
x.addEventListener("click",world());  
//x.removeEventListener("click",hello); 

x.addEventListener("click",hello());//句柄  
x.addEventListener("click",world);  
//x.removeEventListener("click",hello);  

如果任意一个加()，一个不加(),那么点击按钮会弹出不加()的那个对应的消息框，点击刷新会出现加()括号的那个对应的消息框。

情况4：

x.addEventListener("click",hello);//句柄  
//x.addEventListener("click",world);  
x.removeEventListener("click",hello);  

在视频教学中不加()，按按钮没有任何反应，事件句柄被删除。

情况5：

x.addEventListener("click",hello());//句柄  
//x.addEventListener("click",world);  
x.removeEventListener("click",hello());  

两个都加()，按钮没有反应，刷新出现两次"hello"对话框。

情况6：

x.addEventListener("click",hello);//句柄  
//x.addEventListener("click",world);  
x.removeEventListener("click",hello()); 

x.addEventListener("click",hello());//句柄  
//x.addEventListener("click",world);  
x.removeEventListener("click",hello); 

如果其中一个不加，那么结果如下：
当第一个不加时，点击按钮和刷新各会弹出一个消息框；当第二个不加时，按钮没反应，刷新出现一个消息框。

分了六种情况，搞得自己都晕头晕脑的，暂时还未明白其中道理，等我了解清楚后，再来此处解答！

---

小哥哥我终于搞明白了！！！

JS中函数名后面的括号加与不加的区别

首先我们要明白一个概念：JavaScript 的函数是一等公民，可以作为参数传入别的函数，也可以作为一个函数的返回值，也可以被重新赋值。也就是说和变量一样。
举个例子：

function test(str) {  
        str+=1;  
       return str;  
    }  
    var demo1=test(1);  
    console.log(demo1);//2 返回的是执行函数得到的值  
  
    var demo2=test;  
    console.log(demo2);//function test() 返回的是函数体本身  

不加括号的时候，是表示这个函数本体，也是函数的指针，当加括号的时候，就等于引用该函数，直接得到该函数的返回值。
所以对于我们这里的情况，就很好解释了， addEventListener （参数1，参数2）；function函数在这里是作为参数导入，应该用函数体，所以不加括号，所以没加括号的时候按钮正常运行；如果加了括号等于这里导入的参数是function函数的返回值，那么调用的结果就是undefined。
所以当我们点击刷新时，加括号的函数就直接被执行（ps：js中可以执行一个语句中的一部分）。
更详细的解释，请看：https://www.zhihu.com/question/31044040（我也是从知乎大神处看的，嘻嘻）。