展开

关键词

jimojianghu

以前,如果要禁止移动端设备的触摸屏上,手指缩小放大的功能,都会想到使用viewport 来处理。 passived 实际上就是告诉浏览器,某个事件监听是否会使用 preventDefault 来阻止默认行为,便于浏览器优化性能。特别是浏览器优化页面滚动时的性能,可以让页面滚动更顺滑。 Chrome中,wheel / touch 等事件中的 passive 会默认设置为true,但Safari不支持。 由于目标被视为被动,因此无法被动事件侦听器中阻止默认行为。 可能的发生情景:移动端使用touch事件后,垂直平移时的报错。 方法一:使用 touch-action 样式来禁止垂直平移的默认行为 touch-action: pan-y; 方法二:监听 touch事件 中,明确设置 passive 为 false,声明不是被动

15500

让页面滑动流畅得飞起的新特性:Passive Event Listeners

当属性passive的值为true的时候,代表监该听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。 是被动监听mousewheel事件,即handler内部不会调用事件preventDefault函数。 只要输入事件要在内核线程执行逻辑,那么遇到内核线程忙,必然无法立即得到响应。 浏览器只有等内核线程执行事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。 对应这种场景(如上图中的MouseWheel Handlers:YES-Passive:No分支),合成线程无法知道对应的监听器内部是否会调用preventDefault函数来阻止默认行为,此时合成线程只能将该输入事件派发给内核线程处理

61270
  • 广告
    关闭

    老用户专属续费福利

    云服务器CVM、轻量应用服务器1.5折续费券等您来抽!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    让页面滑动流畅得飞起的新特性:Passive Event Listeners

    当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。 是被动监听mousewheel事件,即handler内部不会调用事件preventDefault函数。 只要输入事件要在内核线程执行逻辑,那么遇到内核线程忙,必然无法立即得到响应。 浏览器只有等内核线程执行事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。 对应这种场景(如上图中的MouseWheel Handlers:YES-Passive:No分支),合成线程无法知道对应的监听器内部是否会调用preventDefault函数来阻止默认行为,此时合成线程只能将该输入事件派发给内核线程处理

    6.8K00

    24 事件绑定、事件修饰符与事件三阶段

    这个示例的运行效果是,当单击内部的链接a时,只执行一个doThis函数;而如何将stop修饰符去了,doThat也会派发。 2,多个修饰符串连 事件修饰符可以串连并用,例如: <! 表单上使用该修饰符,相当于该表单上的所有事件,默认都调用event.preventDefault。 -- 只监听一次 --> once 这个最简单,监听事件执行函数,执行完了就把事件监听移除了。vue的事件机制中,vm. 浏览器只有等内核线程执行事件函数的代码时,才能知道函数内部是否会调用了preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。 在这种场景下,如果涉及到用户交互的事件无法快速产生,会导致页面无法及时渲染而让用户感到页面卡顿。

    37710

    ES6箭头函数有什么不一样?

    作为事件处理程序调用:对于用作DOM事件侦听器的常规函数,this指向触发事件的目标对象、DOM元素、document或window 。 再来看个函数,该函数将用作单击事件侦听器,例如,表单提交按钮: function processFormData (evt) { evt.preventDefault(); const form 但是,这并不能解释为什么不能使用bind()将事件侦听器箭头函数绑定到button元素。 _sortByFileSize(files)); 事件监听器函数内部,this 指向 input 元素 因此this._sortByFileSize 为 undefined。 这里不使用bind(),可以简单地用一个箭头函数替换事件侦听器函数。

    29120

    事件

    image.png 事件处理程序 我们也称之为事件侦听器(listener),事件就是用户或浏览器自身执行的某种动作。 image.png 事件处理程序内部,this始终等同于currentTarget,而target是事件的实际目标。 这种方法无法给一个事件添加多个事件处理程序,一个事件只能绑定一次,后面的程序会覆盖前面的程序。 //删除事件 /*参数分别是,事件处理属性名称,处理函数,是否捕获时执行事件处理函数, 默认是false,即在冒泡阶段执行 */ 应用举例 var btn = document.getElementById ()添加的匿名函数将无法移除。

    39030

    JavaScript面试问题:事件委托和this

    所有现代浏览器支持preventDefault方法,这个方法会阻止浏览器处理事件的默认行为。一个常见示例就是链接,使用链接执行UI操作是一种常见的做法。 使用事件委托能减少监听器数量,元素的容器上绑定事件意味着只需要一个监听器。这种方法的缺点是,父容器的侦听器可能需要检查事件来选择正确的操作,而元素本身不会是一个监听器。 父容器层次的监听器能处理多种不同的事件操作,这是一种简单的方法来管理相关的事件操作,这些事件通常需要执行相关功能或需要共享数据。 如果父容器是监听器,然后要执行独立的内部操作而并不需要添加或者移除本身的监听器。 元素操作单页应用中是极其常见的,为某部分添加一个按钮这样简单的事情也会为应用程序创建一个潜在的性能块,没有合适的事件委托,就必须手动为每一个按钮添加监听,如果每个侦听器不清理干净,它可能会导致内存泄漏

    46150

    js 事件笔记

    一、事件简述 1、事件概念 Web中, 事件浏览器窗口中被触发,执行事先绑定的事件处理器(也就是事件触发时会运行的代码块),对事件做出响应。 如果事件不传播,我们无法确定我们点击的对象是什么? 2、事件流三种模型 2.1事件冒泡模型 事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素。 三、事件处理程序(事件侦听器(listener)) 1、概念 事件处理程序:事件触发后,执行响应对应事件的程序。 3.4 removeEventListener解绑事件 通过addEventListener添加的事件处理程序只能通过removeEventListener移除,移除时参数与添加的时候相同 添加的匿名函数无法移除 input[name=username]').value==='sjz'){ this.submit() } }) </script> 结果 2.4target和currenttarget 事件处理程序内部

    2.3K21

    现代浏览器探秘(part4):事件处理

    因为选项卡内部的内容由渲染器进程处理,所以浏览器进程会把事件类型(如touchstart)及其坐标发送到渲染器进程。 渲染器进程通过查找事件目标并运行附加的事件侦听器来适当地处理事件。 ? 图4:覆盖整个页面的非快速可滚动区域进行输入 为了缓解这种情况,你可以事件侦听器中传递passive:true选项。 这向浏览器提示你仍然希望主线程中监听事件,同时合成器也可以继续并合成新帧。 鼠标事件中使用 passive:true 选项意味着可以平滑滚动页面,但是在你想要用preventDefault 来限制滚动方向时,垂直滚动可能已经开始了。 下一步 本系列中,我们介绍了Web浏览器的内部工作原理。 例如,如果要确保应用永远不会阻止解析,或者可以同步脚本策略上运行应用。 启用 sync-script: 'none' 时,将禁止解析器阻止 JavaScript 执行

    37320

    谈谈SpringBoot 事件机制

    接收应用程序事件 现在,我们知道如何创建和发布自定义事件,让我们看看如何侦听该事件事件可以有多个侦听器并且根据应用程序要求执行不同的工作。 有两种方法可以定义侦听器创建ApplicationContext之前会触发一些事件,因此我们无法将这些事件注册为@Bean。 让我们按照它们应用程序启动过程中的执行顺序来进行观察。 建议此时不要修改内部状态,因为所有初始化步骤都将完成。 ApplicationFailedEvent 如果存在异常并且应用程序无法启动,则会触发ApplicationFailedEvent。 启动期间的任何时间都可能发生这种情况。 我们可以使用它来执行一些任务,例如执行脚本或在启动失败时发出通知。 结论 事件是为同一应用程序上下文内的Spring Bean之间进行简单通信而设计的。

    78930

    前端开发面试题答案(三)

    全局函数无法查看局部函数的内部细节,但局部函数可以查看其上层的函数细节,直至全局细节。 A: 不知道(没有被告诉) 16、写一个通用的事件侦听器函数。 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。 say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在 使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源 因为say667()的内部函数的执行需要依赖

    33930

    touch-action导致安卓页面无法滚动

    我用这个属性是因为自己使用antd-mobile的走马灯时候,控制台代码警告,内容是这样的: [Intervention] Unable to preventDefault inside passive 其实就是是否阻止默认事件200ms延迟然后再执行滚动行为,而之前的fastclick就是通过去掉这部分来避免点击延迟的。 css方式:比较简单 touch-action:none js方式:touch的事件监听方法上绑定第三个参数{ passive: false } elem.addEventListener( ' 通过调用禁用浏览器处理手势preventDefault(),但也应该使用触摸动作来确保浏览器调用任何事件侦听器之前知道应用程序的意图。 这就是安卓上无法页面滚动的原因。 为什么ios没有受影响呢,我觉得可能是ios默认支持touch事件的原因吧。如果你知道底层的原因或者详细的文档说明,可以告诉我哦。

    2.8K00

    Vue Template 修饰符和简写,让开发效率有所提高

    本文中,我们将介绍指令的修饰符和一些有用的模板简写指令。 修饰符 修饰符用于以特殊方式绑定指令。 .capture让我们捕获事件。 也就是说,当我们在内部元素中运行事件处理程序时,相同的事件处理程序也将在外部元素中运行。 .self 修饰符的作用是:只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的 。 浏览器只有等内核线程执行事件监听器对应的 JS 代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。 这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。

    23010

    23 个初级 Vue.js 面试题

    data 属性上所做的任何更改都将优先于 form 字段上的用户输入事件。 6. 你如何捕获元素上的点击事件? 可以使用 v-on:click 指令捕获 Click 事件。 例如以下代码使用 v-on 指令组件上实现 click 事件侦听器代码中对此进行演示。 可以在任何元素上使用 v-on 指令来实现事件侦听器。此外,v-on 还允许我们将按键修饰符用于 “enter”,“tab”,“esc”,“space” 等常见按键。 事件侦听器上调用 event.preventDefault() 的最佳方式是将 .prevent 修饰符与 v-on 指令一起使用。 当用户键入内容时,将重新执行计算的方法,并且验证格式之后,动态删除无效的类。 18. 如何确保单文件组件中定义的 CSS 样式仅应用于该组件,而不被用于其他组件?

    55710

    任务,微任务,队列和时间表

    这使浏览器可以优先执行对性能敏感的任务,例如用户输入。好吧好吧,和我在一起… 计划了任务,以便浏览器可以从内部访问JavaScript / DOM,并确保这些操作顺序发生。 Firefox和Safari正确耗尽了点击侦听器之间的微任务队列,如突变回调所示,但承诺的排队似乎不同。鉴于工作和微任务之间的联系模糊,这是可以原谅的,但我仍然希望它们侦听器回调之间执行。 使用Edge,我们已经看到它的队列承诺不正确,但是它也无法耗尽点击侦听器之间的微任务队列,相反,它是调用所有侦听器之后执行的,这mutate两个click日志之后占单个日志。错误票。 调用每个侦听器回调之后…… 如果脚本设置对象堆栈现在为空,请执行微任务检查点 — HTML:回调步骤3 之后进行清理 以前,这意味着微任务侦听器回调之间运行,但.click()会导致事件同步分派, 不幸的是,IE / Edge中事情总是失败的,因为回调之后无法处理突变事件。 希望我们很快会在这里开始看到一些互操作性。 你做到了!

    22620

    JavaScript事件

    属性值得到对象 //此处click 点击 是一种事件名称 是浏览器窗口中发生点击的瞬间 on这个单词,就是响应click这个事件 所以onclick就是事件处理程序 又叫事件侦听器 作用是为tg 等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。 执行冒泡事件 ② 点击child情况有所不同,事件由document传向parent执行事件,然后传向child最后开始冒泡,所以执行顺序各位一定要清晰 事件对象 事件对象:触发DOM上的某个事件的时候 (DOM3新增) 我们的事件处理内部,this与currentTarget相同 createEvent 可以document对象上使用createEvent创建一个event对象 DOM3新增以下事件 解决方法: 合理利用事件委托; 执行相关操作的时候,先移除掉事件,再移除DOM节点; 页面卸载之前,先通过onunload事件移除掉所有事件处理程序。

    39760

    事件

    事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。 一、 事件事件流,描述的是从页面中接收事件的顺序。 1. -- 等价于 --> <input type="button" value="Echo value" onclick="alert(value)" /> 事件处理函数内部,可以像访问局部变量一样访问document 与事件关联的抽象视图 事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。 可以body的捕获阶段执行event.stopPropagation();来阻止后续的所有事件处理! 4. ,因为HTML中无法访问window元素。

    45851

    相关产品

    • 测试管理

      测试管理

      CODING 测试管理(CODING-TM)为您提供井然有序的测试协同管理工具服务,从测试用例库管理、制定测试计划,到协作完成测试任务,为测试团队提供敏捷测试工作方式,提高测试与研发团队的协同效率……

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券