js中addEventListener事件监听器参数详解

时间: 2018-07-30阅读: 2440标签: 事件

我们都知道addEventListener() 的参数约定是这样的:

addEventListener(type, listener[, useCapture ])

useCapture是可选参数,默认值为false,它代表:控制监听器是在捕获阶段执行还是在冒泡阶段执行,通常我们都没传递第三个参数(传 true 的情况太少了)。目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了,也就是说第三个参数现在可以是两种类型的值了:

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])


这篇文章主要讲解第三参数为对象值的情况,目前规范中 options 对象可用的属性有三个:

document.addEventListener(type, fn, {
    capture: false,
    passive: false,
    once: false
})


passive就是告诉浏览器我可不可以用stopPropagation【该方法将停止事件的传播】,在执行fn之前就告诉浏览器,让浏览器性能更好。比如有时候你滑动滚轮的时候,你阻止默认行为,那么鼠标就不应该动了呗,但是它也动了。所以说浏览器刚开始是不知道你是否要取消默认行为的执行代码之后就知道了。true 是不可以使用stopPropagation


capture 就是 冒泡阶段或者事件捕获阶段执行事件   true 事件捕获阶段


once  是执行一次fn就清除fn,传true为清除。如果你多次执行,那么就会给documen添加多个事件,特别不好,容易造成事件混乱等一些问题,所以这时候就once就很好了。目前好像就谷歌支持吧


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/957

关闭

CSS中的pointer-events属性实现点穿效果

具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发

nodejs中怎么绑定事件?

nodejs中绑定事件的方法:nodejs中使用on(arg1,arg2);绑定事件,第一个参数是触发条件,第二个参数为触发的方法。当web server接收到请求,就把它关闭然后进行处理,然后去服务下一个web请求。

能冒泡的事件

每个 event 都有一个event.bubbles属性,可以知道它可否冒泡。(ref:W3定义的Event Interface),当然 W3 DOM Level 3 Events 的细则里已经附上这个表格了:

如何在React中优雅的处理doubleClick?

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。解决办法也很简单: 延迟 click事件的处理, 直到判断这个click 不在 doubleClick 中。

用js代码触发dom事件的实现方案

前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等

Event是什么?注册事件监听的方式有哪些?

Event 接口表示在 DOM 中发生的任何事件(常见事件); 一些是用户生成的(例如鼠标或键盘事件),而其他由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。事件通常由外部源触发,同样也会以编程方式触发

js 彻底搞懂事件循环机制 Event Loop

所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务,比如简单的逻辑操作及函数,而异步任务不会立马立马执行,会挪步放到到异步队列中,比如ajax、promise、事件、计时器等等。

Js事件系统

提到事件,相信每位Javascript开发者都不会陌生,由于Javascript是先有实现,后有规范,因此,对于大部分人来说,事件模块可以说是比较模糊的,本文将从不同角度帮助你理清楚事件模块。

JS事件冒泡机制以及委托方法,以及vue中的stop

要理解事件冒泡机制,就得先了解事件。浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作。我们较为熟悉的事件有三大类型:鼠标键盘事件、页面事件、表单相关事件。

事件循环以及vue.nextTick的应用

本文之所以叫宏任务、宏任务队列、微任务队列、微任务,只是将两者区分开来,一轮事件循环只取一个宏任务,宏任务中的同步代码执行完后,就依次从前往后执行微任务队列中的微任务

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!