>

js中addEventListener事件监听器参数详解,简单粗暴

- 编辑:www.bifa688.com -

js中addEventListener事件监听器参数详解,简单粗暴

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

 

相信如果用谷歌浏览器做移动端页面的时候  

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

function show(){

用touch事件的时候应该遇到过这个东东吧

addEventListener(type, listener[, useCapture ])

document.addEventListener("click",fn,{

必发88官网 1

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

 

 

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

 "passive":false,

 

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

 "capture":false,

documet.addEventListener("touchstart",function(){

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

 "once":true

 

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

 

  console.log(123);

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

});

 

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

 

});

"passive" 就是告诉浏览器  我可不可以用 stopPropagation  在执行fn之前就告诉浏览器  让浏览器性能更好

 

比如有时候 你滑动滚轮的时候  你阻止默认行为  那么鼠标就不应该动了呗  但是它也动了

[Violation] Added non-passive event listener to a scroll-blocking ``'touchstart' event. Consider marking event handler as ``'passive' to make the page more responsive.

所以说浏览器刚开始是不知道你是否要取消默认行为的 执行代码之后就知道了

翻译过来就是

true 是不可以使用stopPropagation  

违反:没有添加被动事件监听器来阻止'touchstart'事件,请考虑添加事件管理者'passive',以使页面更加流畅。

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

出现如上提示这可能是由于console的过滤器选择了Verbose

once  是执行一次fn就清除fn  true 清除 

于是你检查了代码  发现并没有问题  那么这到底是啥呢

看上面代码  如果你多次执行show 那么就会给documen添加多个事件   特别不好 

强迫症的我 上网百度了 一下

容易造成事件混乱  等一些问题

于是就有所了解

所以这时候就once 就很好了

 

目前好像就谷歌支持吧

以前的监听器都是这样的

}

element.addEventListener("touchstart",fn,true|false); 

true  是事件捕获阶段执行

false  是事件冒泡阶段执行

这里不细说

 

没有第三个参数的时候默认为false 

第三个参数还可以是对象

element.addEventListener("touchstart",fn,

{

capture: Boolean, passive: Boolean, once: Boolean}

}); 

 

第一个参数的意思  true|false  事件捕获阶段冒泡阶段

第二个参数  true|flase  不能调用 | 可以调用preventDefault()

必发88官网,第三个参数 once  true|false 只能执行一次fn  | 不限制

 

 

 

那问题来了  为什么要使用对象  并且要用passive呢  是因为事件里面的fn执行时需要时间滴

你想呀  执行代码的时候 比如  mousewheel 的时候  鼠标滚轮让滚动条动 可是你调用

preventDefault() 取消了事件的默认行为  那你说  它到底该动还是不动,浏览器一脸懵逼

它只有在fn里面的代码执行完之后才会知道到底要不要取消默认行为 这样等待的时间不就

白白浪费掉了吗 是性能低下  在执行fn之前就告诉 它  是否取消默认行为

这不就你知我长短  我知你深浅了吗

 

由于这个只有谷歌有  所以兼容处理  不认识的大神写的

 

 

   try{

 var passiveSupported=false;

 var opts=Object.defineProperty({},"passive",{

      

   get:function(){

      

  passiveSupported=true;

 

}

 

});

   document.addEventListener("自己决定",null,opts);

}

 

catch(e){

 

}

 

 document.addEventListener("touchstart",fn,passiveSupported?{"passive":true}:false);

 

这么看不得劲

挨张图片

必发88官网 2

 

 

 

 

 有的人可能不知道 Object.defineProperty()

我就说在这需要用知道的

就是当访问{} 的 passive 属性的时候 执行get方法

{}  不就是new Object() 的语法糖吗

 

 console.log(options) 就是;必发88官网 3

 

 所以你明白了吧  必发88官网 4

当触发这个的时候  就是访问options的passive 属性  然后passiveSupported=true

 “test”  你随意设置    

 

嗯  差不多了

 

本文由必发88官网发布,转载请注明来源:js中addEventListener事件监听器参数详解,简单粗暴