EventTarget.addEventListener()事件监听
文章目录
- EventTarget.addEventListener()的意义和原理
- 什么是事件监听
- addEventListener()的原理
- addEventListener()的语法
- addEventListener()的参数
- addEventListener()的特点
- addEventListener()的移除
- addEventListener()监听事件的使用—事件委托
EventTarget.addEventListener()的意义和原理
什么是事件监听
事件监听:也叫注册事件、绑定事件。
事件: 用户与网页的交互动作;比如说鼠标滑动、点击网页。
监听: 是为了让计算机随时能够发现这个时间发生了,从而执行程序员下达的指令动作,也就是我们封装起来函数里面需要执行的。
JS的事件监听的主要形式有两种:
- 以on开头的传统注册方式,比如说onclick、onmousemove等。
- addEventListener()+不带on的事件类型的注册方式
addEventListener()的原理
原理: 将函数或实现 EventListener
的对象添加到调用它的 Event
目标上指定事件类型的事件侦听器列表中。如果函数或对象已位于此目标的事件侦听器列表中,则不会再次添加该函数或对象。
addEventListener()的语法
EventTarget.addEventListener(type, event, listener, useCapture)
addEventListener()的参数
参数 | 说明 | 是否必填 |
---|---|---|
EventTarget | 被绑定的监听对象,一般为执行事件的对象的父级或者本身(this) | 必填 |
type | 一个不带on的区分大小写的字符串,表示要监听的事件,eg: click、mousemove等 | 必填 |
listener | 事件处理函数,事件发生是会调用该监听函数,注意这里的函数为一个回调函数 | 可选 |
useCapture | DOM事件流的其中一个阶段(JS每次只允许执行一个阶段),为一个布尔值,默认值为false(冒泡阶段,从下往上执行),true(捕获阶段,从上往下执行) | 可选 |
注意:onficus(聚焦)、onblur(失焦)、onmouseenter(鼠标移入)、onmouseleave(鼠标移出)四个是没有事件冒泡的
addEventListener()的特点
同一个元素同一个事件可以注册多个监听器(监听处理函数)
addEventListener()的移除
addEventListener()为绑定事件,那么既然有绑定那就有移除,那addEventListener()的移除是什么呢
—removeEventListener()事件移除
比如说,在我第一次点击一个元素想让它执行但是第二次再点就不执行了应该怎么实现呢?
在这里,被移除了事件监听的只能点击一次之后就不能再触发点击了,但是左边没有被移除的就能一直被点击,实现代码如下:
<body><button>可以无限点击</button><button>只有第一次点击生效哦</button><script>var btn = document.querySelectorAll('button')btn[0].addEventListener('click', function() {console.log(111);})btn[1].addEventListener('click', fn)function fn() {console.log(222);btn[1].removeEventListener('click', fn)// 因为移除监听事件和绑定的参数是一样的,所以这里也只能是一个回调函数,函数不打()是因为点击才执行}</script>
</body>
如果觉得那个比较麻烦的话还有一种实现方法:
代码如下:
btn[1].addEventListener('click', function fn() {console.log(222);console.log(this);this.removeEventListener('click', fn)})// 注意这里的函数调用都是不打()的哟
好到这里差不多知道了事件的绑定,既然监听事件和传统on开头的注册方法效果差不多,那么事件监听一般怎么使用,用在哪里呢
addEventListener()监听事件的使用—事件委托
两个都是绑定事件,那 addEventListener()
那么长 为什么还要去用他呢
当我们遇到那种一个大盒子里面有很多个小盒子更或者说ul里面有很多li还要去操作每一个li的时候,用传统注册方式一个个的去绑定那多麻烦,但是 addEventListener()
就可以讲事件委托给父元素,再通过 e.target
的方式来操作每一个子元素。
事件委托核心原理:给父节点添加监听器,利用之间冒泡影响每一个子节点,通过子节点冒泡到父节点身上来完成事件,再通过 e.target
得到触发事件的对象然后就可以操作触发事件的子节点,这样可以大量的减少代码量。
那么 e.target
又是什么呢?
请听下回分解。
EventTarget.addEventListener()事件监听相关推荐
- addEventListener事件监听传递参数
Flash as3 addEventListener事件监听传递参数 var sayHello:String = "how are you"; btn1.addEventListe ...
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
- Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听 参数: ...
- addEventListener 事件监听方式
语法规范: evenTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener()方法将指定的监听 ...
- addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener()方法将指定的监听器注册到e ...
- addEventListener 事件监听
1,事件委托 不给子节点 li 设置事件监听器,而直接给父节点 ul 设置,利用冒泡原理影响每个子节点 <body><ul><li>知否知否,点我应有弹窗在手< ...
- addEventListener()事件监听
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
- JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. 您可以使用removeEventListener()方法轻松删除事件侦听器. 语法:element.addEventListe ...
- addEventListener() 事件监听
无意间有人问到了,这个方法,我就学了一下,顺便敲了一个小demo. addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是不会覆盖前面 ...
最新文章
- 优雅处理你的Java异常
- 【Python】可遍历的数据类型有哪些?
- 2017.3.12 lzy 测试
- 敏捷、TDD(测试驱动开发)、OO--前奏
- leetcode 171. Excel Sheet Column Number
- 维护计算机需要做哪些,电脑的日常维护有哪些?
- LP框架| 三分钟快速构建分布式微服务系统(一)
- python 期货现货差价监测_大宗商品现货数据不好拿?商品季节性难跟踪?Python爬虫一键解决没烦恼...
- code回归采访哭 ladies_LADIES’CODE再次提到高恩妃和权梨世的车祸事故 在节目中流泪...
- 用51单片机驱动蜂鸣器
- 手把手教你如何搭建团队知识管理体系
- 智力题:36匹马,6条跑道,没有计时器,至少需要多少次选出最快的三匹马
- 【微信小程序】实现页面跳转功能
- 为什么医院治不好你的鼻炎
- moment 取年月日_moment的简单使用
- Mac Intel Chip or Mac Apple Chip
- 博客之星活动改进建议
- GOOGLE 人机验证(RECAPTCHA)无法显示解决方案(转)
- 德拉吉力保欧元区稳定,非美货币强劲上扬
- 基于单片机的自动浇花电路设计(#0216)