[ javascript ] 关于addEventListener绑定事件的一些细节.

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量2k 收藏 1
点赞数
分类专栏： 前端 javascript iscroll 文章标签： javascript 函数 事件 iscroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangzhihello/article/details/53217734
版权
在阅读IScroll源码时，发现在初始化事件(_initEvent)中，addEventListener的第二个参数传入的是`this`而非函数。经研究发现，addEventListener的第二个参数可以是一个实现了EventListener接口的对象或函数。JavaScript函数对象默认实现此接口并调用handleEvent方法。IScroll源码中证实了这一行为。总结关键点：1. 参数可以是函数或实现了EventListener接口的对象；2. 对象会自动调用handleEvent方法。
摘要由CSDN通过智能技术生成

最近在读 IScroll 源码，发现其中的_initEvent 事件方法有点奇怪。如下：

这里写图片描述

其中的 utils.addEvent 方法如下：
这里写图片描述

这里出现的问题是：
之前我们使用addEventListener 绑定事件的时候，第二个参数不都是传入一个function么，为什么这里传入的是一个this ? 竟然是一个对象？
于是百度之，网上清一色的都是说第二个参数都是传入一个function.
之后查看了一个javscript的api，果然发现了问题。

这里写图片描述

这里解释得很清楚，第二个参数listener,是可以是一个实现了EventListener接口的对象，或者一个javascript function.（好吧，百度不行去谷歌）

那么接下来的问题是，怎么样才算是实现了EventListener接口呢？ javascript 又没有 implement 之类的关键字。

这里写图片描述

从这里得到一些信息，所有的javascript function 对象都会实现这个EventListener接口，并且会自动调用

最低0.47元/天 解锁文章
梦你所梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 处理事件绑定的一些兼容写法
10-29
本文将详细讲解JavaScript处理事件绑定的一些兼容性写法，适用于不同的浏览器环境。 首先，让我们看一个基本的事件绑定函数的实现。这个函数`addEvent`接受三个参数：目标对象`obj`，事件类型`type`，以及事件处理...
2015-addEventListener
06-03
JavaScript 重新引入：addEventListener 这是 CodeGrid“重新介绍 JavaScript：addEventListener”一文中使用的示例。 请查看以上文章以了解每个示例的解释。
JS中事件绑定addEventListener()
weixin_44134816的博客
03-21 387
addEventListener() //通过这个方法可以为元素绑定响应函数 参数：1.事件的字符串，不要on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般传false 注意：这个方法不支持IE8以下的浏览器 element.addEventerListener("click",function(){ },false) attachEvent() //在IE8中可以使用attachEvent() ...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3197
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
【译】addEventListener 第二个参数
weixin_33775572的博客
06-12 1115
这是原文链接：Our Backwards DOM Event Libraries 浏览器APIs 先简单回顾一下各个浏览器提供了哪些绑定事件的接口。 IE浏览器提供了element.attachEvent接口，可以绑定事件到元素上面。 document.body.attachEvent( 'onclick', function() { alert('body cli...
【NodeJS开发日记（9）】——关于js的addEventListener 和一些常用事件
AndrewFrank0zxy的博客
07-06 1009
【转自：https://www.cnblogs.com/isdom/p/webclips010.html】element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEventListener("touchstart", function(){}, true)el.a...
addEventListener（）方法– JavaScript事件监听器示例代码
cumi6497的博客
08-20 911
The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement ...
动态的绑定事件addEventListener方法的使用
09-04
动态的绑定事件是JavaScript中处理用户交互的一种关键技术，它允许我们向元素添加或移除事件监听器。在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `...
ES6中javascript实现函数绑定及类的事件绑定功能详解
10-19
ES6（ECMAScript 2015）引入了许多现代JavaScript语言的新特性，其中包括了对于函数绑定的简化以及在类中的事件绑定方法的改进。函数绑定是一种把函数中的this值固定为特定对象的技术，它减少了在JavaScript中由于...
js addEventListener
weixin_30896511的博客
09-06 95
window.onload = function () { var lis = document.getElementById("list").getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { ...
addEventListener 的三个参数
weixin_33895657的博客
03-16 697
2019独角兽企业重金招聘Python工程师标准>>> ...
addEventListener第二个参数的handleEvent
weixin_30500663的博客
08-12 81
三水清 2012-03-07 18:48:17 http://js8.in/983.html 昨天无意中看到一篇老外的文章，文章提到了addEventListener第二个参数可以传入object，并且对象中handleEvent为事件处理函数。例如下面的javascript代码： var obj = { handleEvent: function() { ...
addeventlistener事件参数_Node.js从零开始——事件、系统和流
weixin_39716510的博客
11-22 988
毕竟不是一个真正的教程，这里主要还是以普及和介绍为主，所以这一部分就是 Node.js 的其他部分介绍了，主要也就是事件触发、操作系统以及流的知识。1 事件触发器因为我们之前在浏览器中使用 JavaScript，所以知道 JS 通过事件处理了许多用户的交互：鼠标的单击、键盘按钮的按下、对鼠标移动的反应等等。在后端，Node.js 也提供了使用 events 模块 构建类似系统的选项。具体上，此模块...
JS addEventListener参数解析
科研学习笔记！
01-23 2953
前言：   写的目的主要是细化到具体的参数   1.addEventListener(type,listener.useCapture)     type              字符串，事件名称，如'click'等 不需要'on'前缀listener         事件处理的函数，实现EventListener接口useCapture   是否使用捕
JS addEventListener()方法
Dcripple的博客
05-11 2万+
addEventListener()，事件监听，用于向指定的元素添加事件监听 例： <button id="btn">点击</button> <script> document.getElementById("btn").addEventListener("click",function () { console.log(Date()); }); <
javaScript中addEventListener()用法
weixin_47464657的博客
09-12 1028
addEventListener() 方法用于向指定元素添加事件 测试 ``` document.querySelector('#test').addEventListener('click',()=>{ console.log('test click') },false) ``` document.addEventListener(event, function, useCapture) 第一个参数参数event 必须。字符串，指定事件名。 注意:  不要使用 “on” 前缀。 例如，使用 “
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6027
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
js中addEventListener中第3个参数
热门推荐
jijun7885417的专栏
08-15 5万+
addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。eg1：document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false); document
addEventListener绑定事件
12-27
addEventListener是一种给元素绑定事件的方法。通过使用addEventListener方法，可以为指定的元素添加各种事件，例如点击事件、鼠标移动事件等。下面是一个使用addEventListener方法绑定点击事件的示例： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值