首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS篇(028)-移动端 click 事件、touch 事件、tap 事件区别

参考答案: 1.click 事件在移动端会有 200-300ms 延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击 200-300ms 之后,才触发 click,...2.touch 事件是针对触屏手机上触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件监听,让开发者可以获取用户触摸屏幕时一些信息。...mouseover mouseup 触发 3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装...,还是会触发点透问题,因为实质是: 在同一个 z 轴上,z-index 不同两个元素,上面的元素是一个绑定了 tap 事件,下面是一个 a 标签,一旦 tap 触发,这个元素就会 display:...事件,注意: 我们认为 a 标签默认是绑定了 click 事件

5.7K40

JS 数组方法 every 和 some 区别

前言 2. every 和 some 相同点 3. every 和 some 区别 4. every 和 some 总结 1. 前言 JS 数组方法 every 和 some 区别 ?...这是某位前端玩家遇到面试题 特定场景合理使用 JS 方法,不仅可以减少我们代码量,还能更轻松阅读别人代码,同时,也能更好应对面试 2. every 和 some 相同点 every 和 some...array) => {    return item {    return item < 5}) 3. every 和 some 区别...every() 方法用于检测数组所有元素是否都符合指定条件,即 全真才真 every() 方法会遍历数组,当检测到有一个元素不满足指定条件时,直接返回 false,并且停止遍历,剩余元素不会再进行检测...对于空数组,不会检测,直接返回 true some() 方法用于检测数组中是否有元素满足指定条件,有一个满足就返回 true;内部遍历数组时,遇到满足指定条件元素,就返回 true,剩余元素不再进行检测

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

JS动态加载数据绑定事件--delegate() 方法

JS动态加载数据绑定事件-委托delegate() 方法 ---- W3C规范定义 定义和用法 delegate() 方法为指定元素(属于被选元素子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行函数...使用 delegate() 方法事件处理程序适用于当前或未来元素(比如由脚本创建新元素)。...---- JavaScript动态加载数据,同时给他加载绑定事件,我选用Jquwey中 delegate() 方法理解,delegate()方法属于异步式加载绑定,dom元素加载未完成之前,可以委托给...delegate() 方法来实现绑定操作。...第二个参数为 要绑定事件 详情,请翻阅delegate() 方法 ---- 效果如图返回按钮:

7.8K30

JS手机端touch事件计算滑动距离方法

计算手势在手机屏幕上滑动时,手势滑动距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=...document.getElementsByTagName(“body”); body.bind(‘touchstart’,function(event){ var touch = event.targetTouches[0]; //滑动起点坐标...body.bind(“touchmove”,function(event){ var touch = event.targetTouches[0]; //手势滑动时,手势坐标不断变化,取最后一点坐标为最终终点坐标...distanceY=endY - startY; // console.log(“distanceX:”+distanceX+","+“distanceY:”+distanceY); //移动端设备屏幕宽度...=Math.abs(distanceY)){ //在滑动距离超过屏幕高度20%时,做某种操作 if(Math.abs(distanceY)>clientHeight0.2){ //向下滑实行函数

6.5K20

js动画事件_JavaScript事件

js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animation主要有6个属性,分别来设置动画呈现出来哦效果,这个在我另一篇文章中有介绍,我这边简单展示一下。...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时运行时间...下面一段代码讲述是采用监听动画开始,动画再次播放和动画结束做出相应改变,这里用到addEventListener监听动画开始、动画持续播放、动画结束播放。 <!...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

18.3K10

Js 事件委托(事件代理)

一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型所有事件。 例子:有三个同事预计会在周一收到快递。...这里其实还有2层意思: 第一,现在委托前台同事是可以代为签收,即程序中现有的dom节点是有事件; 第二,新员工也是可以被前台MM代为签收,即程序中新添加dom节点也是有事件。...比如我们有100个li,每个li都有相同click点击事件,可能我们会用for循环方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?...,这就是为什么性能优化主要思想之一就是减少DOM操作原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom操作就只需要交互一次,这样就能大大减少与dom交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样事件可以用事件委托,什么样事件不可以用呢?

11.4K30

【整合】input标签JS改变Value事件处理方法

阻塞在于失去焦点后才触发(输入过程中不触发事件)   2、通过JS方法修改值,修改后触发事件。...重点阻塞在于此(JS赋值要触发)   最终采用方案:   1、IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件   2、需求是手工输入结束后才触发事件,避免在文本框实时输入文字时候也因为...适用场景为:文本框输入过程中实时监听输入内容,触发事件 onpropertychange:IE中元素特有的属性,直接在底层监听元素属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作...      适用场景为:页面运行期间实时监听元素属性变化,触发事件,特别适用于在IE中JS操作触发事件场景 后记:项目原需求实现其实最好是在控件里面更改,这里做了个奇怪东西~  权当学习 参考:...、onchange与onpropertychange事件用法和区别 http://blog.csdn.net/freshlover/article/details/39050609 实时监听输入框值变化完美方案

12K50

SelectedIndexChanged事件, SelectedValueChanged事件和SelectionChangeCommitted事件区别及应用

SelectedIndexChanged事件, SelectedValueChanged事件和SelectionChangeCommitted事件区别及应用 l SelectionChangeCommitted...事件 在设定datasource和displaymember和valuemember时,以及手动改变combobox索引和值时都不触发该事件, 只是在界面选择combobox不同值时触发 2...SelectedIndexChanged事件 索引改变时触发 3 SelectedValueChanged事件 值改变时触发 设置DataSource, DisplayMember..., ValueMember不同顺序触发SelectedIndexChanged事件和SelectedValueChanged事件次数 顺序一: this.comboBox1.DisplayMember...= "userName";(都触发) SelectedValueChanged触发四次(总是先触发)SelectedIndexChanged,触发三次 (设置DisplayMember属性时不触发两种事件

94351

js事件(event)

当然我们也可以不给事件绑定处理方法,也就是说当此事件发生时候,什么也不需要做,事件常有,而事件上绑定方法不一定有, 我们给页面中元素某个事件绑定处理方法时候。...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮时候,页面的滚动条会滚动等等;这些都叫事件默认行为,如果想把这些默认行为取消了,相应js代码如下: a.onclick...后面绑定会覆盖前面绑定问题,如: ele.onclick = fn1; ele.onlcik=fn2; 这样处理结果就是,eleonclick事件上,fn2方法把fn1方法给覆盖了,这样就不容易实现同一个事件上绑定多个方法...一、被绑定方法事件触发执行时,this关键字竟让是window,二、IE中被绑定到事件方法执行顺序是混乱。...在W3C标准是在同一事件上,先绑定方法先执行,并且不能重复绑定同一个方法在同一个事件上,但是IE6、7、8中,如果绑定方法少于9个,执行顺序是相反,超过9个,执行顺序就是混乱,这些IE中问题都是比较严重

6.6K30

js中setTimeout用法和JS计时器setTimeout与setInterval方法区别和confirm方法

setTimeout()在js类中使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位(1000ms=1s) setTimeout...计时器setTimeout()与setInterval()是原生JS很重要且用处很多两个方法, 但很多人一直误以为是相同功能: 间隔时间重复执行传入句柄函数....先来看看两者JS手册及英文词典上解释: JS手册»setTimeout() : 用于在指定毫秒数后调用函数或计算表达式; 英文释义»timeout() : 超时;暂时休息;工间休息; JS手册...会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭; 英文释义»interval() : 间隔;间距;幕间休息; 不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易区分开两者区别...简单说, 两才区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入句柄函数. setInterval()方法是每指定间隔时间后执行一次传入句柄函数,循环执行直至关闭窗口或

3.1K10

JS 事件循环

,脚本执行,事件处理等 其包含线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中线程...: 主线程:也就是 js 引擎执行线程,这个线程只有一个,页面渲染、函数处理都在这个主线程上执行。...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎内,与主线程是分开,处理文件读取、网络请求等异步事件。...宏任务主要包含:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含:Promise、MutaionObserver...、process.nextTick(Node.js 环境) setTimeout/Promise 等API便是任务源,而进入任务队列是由他们指定具体执行任务。

15.4K10

js事件大全

一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制范围内鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown...onMouseMove IE4|N4|O 鼠标移动时触发事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发事件 onKeyPress IE4|N4|O 当键盘上某个键被按下并且释放时触发事件...onMove IE|N4|O 浏览器窗口被移动时触发事件 onResize IE4|N4|O 当浏览器窗口大小被改变时触发事件 onScroll IE4|N|O 浏览器滚动条位置发生变化时触发事件...onStop IE5|N|O 浏览器停止按钮被按下时触发事件或者正在下载文件被中断 onUnload IE3|N2|O3 当前页面将被改变时触发事件 表单相关事件 事件 浏览器支持 描述...元素完成需要显示内容后触发事件 onStart IE4|N|O 当Marquee元素开始显示内容时触发事件 编辑事件 事件 浏览器支持 描述 onBeforeCopy IE5|N|O 当页面当前被选择内容将要复制到浏览者系统剪贴板前触发事件

3.8K10

js --- 事件

1.事件流   事件发生时会在元素节点与根节点之间按照特定顺序传播,路径所经过所有节点都会收到该事件,这个传播过程即DOM事件流。...2.两种事件流模型   1.冒泡型事件流:事件传播是从最特定事件目标到最不特定事件目标。即从DOM树叶子到根   2.捕获型事件流:事件传播是从最不特定事件目标到最特定事件目标。...即从DOM树根到叶子 3.绑定事件方法   1.普通浏览器 绑定事件:addEventListener(type,name,bool);     删除事件:removeEventListener...()   2.ie 低版本 绑定事件:attachEvent()     删除事件:detachEvent() 4.参数说明 type 事件类型 例如:click load   name...事件执行函数   bool true 为事件捕获 && false 为事件冒泡 5.阻止事件冒泡和 事件捕获 1.阻止事件冒泡 不 阻止默认行为     event.stopPropagation

7.5K30

js事件循环

首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器js是单线程,也就是说,在同一时刻,最多也只有一个代码段在执行,可是浏览器又能很好处理异步请求,那么到底是为什么呢?...从上图我们可以看出,js主线程它是有一个执行栈,所有的js代码都会在执行栈里运行。...其实(正如上图所示),js是有两个任务队列,一个叫做Macrotask Queue(Task Queue),一个叫做Microtask Queue 前者主要是进行一些比较大型工作,常见有setTimeout...,setInterval,用户交互操作,UI渲染等 后者主要是进行一些比较小型工作,常见有Promise,process.nextTick(nodejs) 那么,两者有什么具体区别呢?...原因:因为一开始js主线程中跑任务就是macrotask任务,而根据事件循环流程,一次事件循环只会执行一个macrotask任务,因此,执行完主线程代码后,它就去从microtask队列里取队首任务来执行

18.7K41
领券