html5 document 事件

2024-09-01

HTML5-常见的事件- DOMContentLoaded事件

一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则在形成完整DOM树之后就会触发,不理会图像.JavaScript文件.CSS文件或其他资源是否已经下载完成. DOMContentLoaded :好处就是可以在页面下载早起就可以添加事件处理程序,这样意味着用户能够尽早地与页面进行交互. 添加DOMContentLoaded事件如下: EventUt

html5 touch事件实现触屏页面上下滑动(二)

五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前的文章及代码html5 touch事件实现触屏页面上下滑动(一) 今天主要实现了一个效果:页面滑动到最上面和最下面的时候阻止其再继续滑动: 因为给页面添加了touch事件那么滚动条等其他页面原有的默认属性将别改变,上篇文章里的 demo可以一直向上滑动或向下滑动,但现实是这样是不可取的完整代码: <!doctype htm

关于windows phone 8.1系统手机对html5触摸事件的支持情况

近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统,所以只支持了html5触摸事件(如touchstart). 印象中WP系统应该只支持MS开头(如MSPointerDown)的指针事件,但测试结果很出人意料:项目在WP8.1的Lumia 640手机上竟完全可以正常运行,并支持了所有的触摸事件... 对于这个问题我挺不解的,于是就查阅了下msdn文档

iso不支持document事件

ios safari游览器除了a.input.button等不支持document事件委托?<body>加上这个样式即可 <style> .clickable-div { cursor: pointer; } </style> $(document).on("click",function(e) { if (e.target.className=="weui_mask_transparent") { //$("#pay_

HTML5触摸事件(touchstart、touchmove和touchend) （转）

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

HTML5拖放事件（Drag-and-Drop,DnD）

拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面.下面例子将演示如何创建自定义拖放源和自定义拖放目标,前者传输数据而不是其文本内容,后者以某种方式相应拖放数据而不是仅显示它. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在

html5 touch事件实现触屏页面上下滑动(一)

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo. 下午好生研究了下终于搞出了个比较全面的上下滑动的小demo,代码比较简单. 下面是完整代码,我把几个重要的地方做了红色标记 <!doctype html> <html lang="en"> <head> <

HTML5 Media事件

Media 事件由媒介(比如视频.图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>.<embed>.<img>.<object> 以及 <video>): 属性值描述 onabort script 在退出时运行的脚本. oncanplay script 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时). oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾

html5 storage事件

HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐说起. QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html.你在其他里面点击播放或者添加的时候,你会发现 https://y.qq.com/portal/player.html 会实时的变化.当前我想,这个神奇啊, 当前想法是如下,可是怎么想都比较low啊. 1. 存入

使用HTML5视频事件示例

<!DOCTYPE html > <html > <head> <title>Video events example</title>  <!-- <meta http-equiv="X-UA-C

HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页

HTML5触摸事件演化tap事件

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件.所以触摸事件反应更快,体验更好. 触摸事件的类型: 为了区别触摸相关的状态改变,存在多种类型的触摸事件.可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型. 注意: 在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没

学习——HTML5中事件

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

使用 HTML5 视频事件

转自:http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx 为什么要使用事件? HTML5 视频对象提供了很多事件,这些事件可以帮助简化和增强网页的内容. 在此处将看到使用事件检查内容是否可用.视频播放状态以及如何在视频中监视当前播放位置的示例. 我的网页准备好了么? 对于使用视频的网页,你会对两种级别的“准备”感兴趣:当加载页面元素时以及当可以播放内容时. HTML5 视频页面中最常用的第一个任务就是查看浏览器是否支持视频

通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown,mousemove,mouveup非常类似,不同的是touch事件可以有多个点击的点,而鼠标每次只有一个点,我们即然是做组件封装,就要考虑在pc上调试的情况,否则用手机调试非常不方便,通过对mouse事件的处理,可以一套代码同时兼容pc端和移动端. 下面来逐步封装一个滑动手势(swipe)的组件

HTML5 input事件检测输入框变化

之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下: 如果我们页面上有这样一个简单到极致的输入框: <input type="text"> 那么我们现在用jquery给它绑定input事件,如下: $("input:text").bind("input propertych

HTML5拖放事件-上传图片预览功能

主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box">请将图片拖拽至此</div> <ul></ul> </body> 2.给标签加上简单的样式: <style type="text/css"> div{ width: 300px; height: 300px; margin:10

iPhone safari中Document事件不触发的解决方案 [冒泡]

写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){ //隐藏代码 }); 各大浏览器都没问题,唯独iPhone上的不会触发事件. 后来排查了一遍原因发现,Safari中是这样处理事件冒泡的: 1.点击某个DIV或其他元素. 2.发现没有处理该事件,继续往上冒泡. 3.直到冒泡到body下面的子节点为止,还是没有人处理该事件的话,就把该事件丢弃掉.不再往上冒泡. 4.只要在这一条冒泡链当中,有一个节点处理了该事件,它就不会丢

document事件及例子

一.关于鼠标事件:onclick:鼠标单击触发 ondbclick:鼠标双击触发 onmouseover:鼠标移上触发 onmouseout:鼠标离开触发 onmousemove:鼠标移动触发二.关于键盘事件:onkeydown:键盘按下瞬间触发 onkeyup:按键抬起触发 onkeypress:按键触发三.关于表单事件:onfocus获得焦点时触发 onblur:失去焦点时触发 onchange:内容改变时触发在下拉列表中作为选中值变化触发事件可以写在标签中也可写在js中 eg:var

HTML5 input事件检测输入框变化[转载]

原文:http://www.linuxidc.com/Linux/2015-07/119984.htm 之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下: 如果我们页面上有这样一个简单到极致的输入框: <input type="text"> 那么我们现在用jquery给它绑定input事件,如下: $

html5 拖放事件

1.设置元素可拖拽属性:draggable true表示可拖拽. false表示不可拖拽. auto默认值,img和带href属性的a标签则表示可拖拽,其他标签表示不可被拖拽. 其他值表示不可拖拽. 兼容FF:需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽. 2.拖拽元素事件: dragstart:拖拽前触发,即鼠标按下,被拖拽元素被拖拽的瞬间触发. event.dataTransfer的大部分设

html5 document 事件

热门专题