首页 / 更多教程 / 事件 passive 是什么?
事件 passive 是什么?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了事件 passive 是什么?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1871字,纯文字阅读大概需要3分钟。
内容图文
passive 是 绑定事件的一个参数,他可以用来改善滚屏(scroll)的性能
根据规范,passive 选项的默认值始终为false。但是,这引入了处理某些触摸事件(以及其他)的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性,从而导致滚动处理期间性能可能大大降低。
为防止出现此问题,某些浏览器(特别是Chrome和Firefox)已将文档级节点 [Window](<https://developer.mozilla.org/zh-CN/docs/Web/API/Window>),[Document](<https://developer.mozilla.org/zh-CN/docs/Web/API/Document>)和[Document.body](<https://developer.mozilla.org/zh-CN/docs/Web/API/Document/body>)的[touchstart](<https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/touchstart>)和[touchmove](<https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/touchmove>)事件的passive选项的默认值更改为true。这可以防止调用事件监听器,因此在用户滚动时无法阻止页面呈现。
var elem = document.getElementById('elem'); elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });
添加passive参数后,touchmove事件不会阻塞页面的滚动(同样适用于鼠标的滚轮事件)。在这里查看demo(需要***)。
**注意:**那些不支持参数options的浏览器,会把第三个参数默认为useCapture,即设置useCapture为true
您可以通过将passive的值显式设置为false来覆盖此行为,如下所示:
/* Feature detection */ /*特诊检测*/ var passiveIfSupported = false; try { window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } })); } catch(err) {} window.addEventListener('scroll', function(event) { /* do something */ // can't use event.preventDefault(); // 不能使用event.prevebt. }, passiveIfSupported );
在不支持addEventListener()的options参数的旧浏览器上,尝试使用它会阻止使用useCapture参数而不正确使用特征检测。
您无需担心基本[scroll](<https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/scroll>) 事件的passive值。由于无法取消,因此事件监听器无法阻止页面呈现。
内容总结
以上是互联网集市为您收集整理的事件 passive 是什么?全部内容,希望文章能够帮你解决事件 passive 是什么?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。