javascript事件侦听器

javascript事件侦听器

事件侦听器就是用来处理事件的,可以接收事件携带的信息,并在接收的该事件后执行特定的代码。

那么这个事件侦听器到底能有什么作用的,现在我就来给大家介绍下事件侦听器的一个用法:
在javascript中我们会经常绑定事件,相信也对绑定事件很熟悉,
但是我们在使用on+绑定事件类型的时候有一个缺陷:
首先我们创建一个绑定事件:
在这里插入图片描述
创建好了后,再给这个事件绑定一次:
在这里插入图片描述
此时,这两个事件的类型是相同的,而同种类型的事件,只能绑定一次,因为直接赋值会讲上面的赋值覆盖。

这个时候,我们就可以使用事件侦听器来解决这个问题:
事件侦听器的语法:
元素.addEventListener(“事件类型不加on”,事件处理函数,事件是否在捕获阶段执行)第三个参数是可选项,可写可不写,默认值是false
在这里插入图片描述
由于第三个参数是让事件是否在捕获阶段执行,所以事件侦听器也可以让其他元素的事件在捕获阶段执行。

事件侦听器好是好,但是在低版本IE中存在兼容问题,所以有对应的兼容写法:
元素.attachEvent(“on加事件类型”,处理函数)
这里只有2个参数,没有第三个参数,因为在低版本IE中只有目标阶段和冒泡阶段,不存在捕获阶段
在这里插入图片描述
因为事件侦听器在低版本IE中存在兼容问题,所以我们在使用的时候需要考虑到这个问题,所以可以使用兼容写法,这样就不需要顾及在低版本ie中的问题了。
我们可以封装成一个函数,这样在使用的时候直接调用就行了:
在这里插入图片描述
函数的第一个形参ele:你需要绑定事件的目标;
第二个参数type:绑定事件的类型;
第三个参数是函数名,这个时候需要自己创建一个函数。

好了,这个事件侦听器的其中一个用法已经介绍完了,就到这里了。

发布了1 篇原创文章 · 获赞 6 · 访问量 67

猜你喜欢

转载自blog.csdn.net/m0_46399431/article/details/104881491