欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 幼教 > 深入理解addEventListener中的第二个参数:listener

深入理解addEventListener中的第二个参数:listener

2025/9/24 14:57:08 来源:https://blog.csdn.net/2301_80304567/article/details/144486805  浏览:    关键词:深入理解addEventListener中的第二个参数:listener

起因


        首先,之前留给我们的一点东西,js的深入内容关键在addEventListener,这个函数中的参数,它们三个参数,分别为type、listener、options,当然在这里还有一些小的问题,比如mdn文档中它介绍到了另一个参数:useCapture,它的语法中,options与useCapture是同级的。

        然后通过几篇博客来实现我对addEventListener的进一步认识,最终综合总结。

addEventListener的工作原理

        我认为如果需要学习addEventListener,并不能简单的学习它的这几个参数,同样需要对他的原理进行一定的学习。

        它这个方法呢,会把指定的监听器注册到EventTarget上,当这个对象触发了设置的第一个参数type/event时,指定的回调函数就会被执行。

        而他的工作原理呢,其实就是把要实现事件监听EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件监听器列表中。

        如果要绑定的函数或对象已经被添加到列表中,该函数或对象不会被再次添加。

 

listener

介绍:

        首先,仍然是先介绍一下这个东西,资料EventTarget.addEventListener() - Web API | MDN

       由此可知,这个玩意就是一个监听,表示触发监听后会发生的内容。

它必须是一个实现了EventListener接口的对象,或者是一个函数。

        怎么说呢,刚想查一查这个对象到底是什么东西,结果就看到了18年的解释,突然让我不知所措,但是觉得它写的不是很清楚,没有我看mdn文档的感觉清楚,但是看了看它的之后更清楚对象是什么了,给他点个赞。

 addEventListener中的EventListener接口对象遗漏的知识点:addEventListener的第 - 掘金

 回调函数

        因为这个事件监听器可以被指定为回调函数或者一个对象(其handleEvent()方法用作回调函数)。

而回调函数本身具有与handleEvent()方法相同的参数和返回值;

回调接收一个参数;一个基于Event的参数,描述已经发生的事件,没有返回值。

这个其实就很常见了,就像可以直接这么写

form.addEventListener('submit', function(e){

e.preventDefault();

alert("触发");

});

对象

        对象的话,就需要实现这个handleEvent(),这个东西就可以是其他的,比如:当这个listener是一个对象的时候,这个对象可以包含handleEvent属性,只要他实现这个属性就可以,然后这个属性的值还可以是一个函数,实质就和函数很像了。

 

<body><!-- <ul id="ul"><li id="1"></li><li id="2"></li><li id="3"></li><li id="4"></li><li id="5"></li></ul> --><form id="form"><fieldset><legend>Fruit juice size</legend><p><input type="radio" name="size" id="size_1" value="small" /><label for="size_1">Small</label></p><p><input type="radio" name="size" id="size_2" value="medium" /><label for="size_2">Medium</label></p><p><input type="radio" name="size" id="size_3" value="large" /><label for="size_3">Large</label></p><input type="submit" value="点击提交"/></fieldset></form><script type="text/javascript">// ul = document.getElementById("ul");// ul.addEventListener('click', function(){// 	alert("ul被点击了")// }, {capture: true, once: true});// form = document.getElementById("form");// form.addEventListener('submit', function(e){// 	alert("sub被点击了")// 	e.preventDefault();// }, {passive: true});form = document.getElementById("form");const myListenerObject = {handleEvent: function(e){alert("触发事件飞起来了")}}form.addEventListener('submit', myListenerObject);</script></body>

结尾

如上便是我的理解,如有高见,还请高人指路。 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词