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

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

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <p id="pid">Hello</p>  
    <button id="btn">按钮</button>  
    <script>  
        var x=document.getElementById("btn");  
        x.addEventListener("click",hello);//句柄  
        x.addEventListener("click",world);  
        x.removeEventListener("click",hello);  
        function hello(){  
            alert("Hello");  
        }  
        function world(){  
            alert("world");  
        }  
    </script>  
</body>  
</html>  

情况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(我也是从知乎大神处看的,嘻嘻)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,028评论 25 707
  • 高级编程语言与S7(2) 2017-08-21HwLib(慧兰博)HwLib慧兰博 1 PLC侧设置 由于S7-1...
    慧兰博阅读 445评论 2 1
  • JavaScript 1. type 类型判断 isString (o) {//是否字符串 returnObjec...
    Mr_ZhangH阅读 628评论 0 1
  • 学会一种新知识不如掌握一种获取知识的能力,《如何阅读一本书》就是教会你如何通过书与智者交谈。 №1 本书导语:阅读...
    夜阑明月阅读 1,618评论 1 10
  • 国庆长假,回了趟家。在外经历多了,回家后就看到了以前看不到的东西…… 一天下午的时候去剪了头发,当时正好开剪...
    阿暖易凉阅读 236评论 0 0