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

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

我们都知道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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

React添加事件

React添加事件,和DOM上添加事件类似,但又有细微的不同.React的事件命名采用小驼峰(camelCase)的命名方式,DOM采用的是纯小写的方式;

css3 pointer-events(阻止hover、active、onclick等触发事件)

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

原生js实现trigger方法

事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?

d3 zoom 抖动问题事件

直接对元素添加 zoom事件 会有很大得抖动,查文档 看代码之后发现是 由于元素在不断变化, 所以计算基础值也不不断变化,所以会导致计算出来得值 忽大忽小 从而造成抖动

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

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

DOM事件流与事件对象

事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即是DOM事件流。举个例子,下面是给一个div注册了点击事件后,事件传播的过程。

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

NodeJS事件

触发器Emitter会触发命名事件eventName来调用函数Listener,移除指定事件的指定监听器:emitter.removeListener(eName, listener)、emitter.off(eName,listener) 设置监听器最大绑定值:emitter.setMaxListeners(n)

几种HTML标签伪元素绑定事件的方式

图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所有页面都是通过伪元素来展示图标的,将所有页面中图标改成 DOM 元素也不太可行。

javascript的事件流模型都有什么?

事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。

点击更多...

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