javascript基础-事件2
DOM0,DOM2,DOM3事件类型
图解:
范畴 | 响应顺序(标:标准浏览器、IE9+) | 注意点 |
MouseEvent | 标: mousedown-mouseup-click-mousedown-mouseup-click-dblclick IE8-: mousedown-mouseup-click-mouseup-click-dblclick |
clientX/Y: 可视区坐标,不包含滚动区域 pageX/Y: 页面区坐标,包含滚动区域 IE8-没有pageX/Y,需clientX/Y+document.scrollTop|| document.documentElement.scrollTop 修改键:shiftKey ctrlKey mousedown/up: 移动设备(IOS/Android): 无障碍阅读,屏幕阅读器: |
FocusEvent | focusout-focusin-blur-focus | |
键盘与文本 | keydown-keypress-keyup | 区分按键: 先读键编码event.keyCode(ASCii),取到按键字符String.fromCharCode()。 标准浏览器会优先将编码存入charCode |
HTML5事件类型
移动设备专有事件
图解: 1. orientationchange: iOS、WebView支持,Android不一定支持。Android用resize事件替代。注意resize事件,改变1px大小会触发一次。
2. 触摸事件:三touch集合属性touches/targetTouches/changeTouches,每个touch包含标准的鼠标事件属性。触摸时的事件产生顺序:touchstart-mouseover-mousemove-mousedown-mouseup-click-touchend。
3. 手势事件: 在包含标准的鼠标事件属性的基础上,还额外包含ratation(旋转角度,顺时针为正,逆时针为负)、scale(手指间的距离)
事件处理
IE8-在innerHTML/onunload 需要移除绑定的事件。
通常针对冒泡事件,在document绑定一次。然后通过target的id或自定义属性或class,来分发事件处理。这样页面上绑定事件的数量,降低内存的损耗。
$(document).on('click',function(e){
var target = e.target,
dataset = target.dataset,
eventName = dataset['eventName']; //ID
switch(id){
case 'hd-tab-myto': hbStatusHandler(true);return;
} //eventName
switch(eventName){
case 'to-app': $H.toRoot();return; //跳到易购首页
...
}
}
javascript基础-事件2的更多相关文章
- javascript基础-事件1
原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...
- JavaScript基础事件(6)
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...
- JavaScript基础系列目录(2014.06.01~2014.06.08)
下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...
- 【JavaWeb】JavaScript 基础
JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- JavaScript基础笔记(九)事件
事件 一.事件流 事件流描述的是从页面中接收事件的顺序. 一)事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点. 如:div------>b ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
随机推荐
- 恢复oracle数据库误删除数据的方法汇总
学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些问题时,我开始寻找答案.今天主要以oracle数据库为 ...
- 常见BOM实用对象
1.跨浏览器获取窗口左边上边位置 2.IE9+.Chrome.Safari.Opera.Firefox支持下列属性. innerheight 返回浏览器窗口本身的高度. innerwidth 返回浏 ...
- 深入理解MVC
首先我们来看看MVC架构的示意图: 和访问者交互的是控制层(Controller层),控制器(controller)是同类交互的集合,每一个交互的操作,都对应了一个动作(act ...
- php checkbox 从数据库读取和写入
checkbox将选中的值写入数据库中,在修改的时候如何从数据库中读取并设定Checkbox的状态 1.写入数据库提交后因为你的rol是数组,所以可以使用$_POST获取 PHP code ? 1 ...
- 详解 Node + Redux + MongoDB 实现 Todolist
前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...
- centos7安装redis3.0和phpredis扩展详细教程(图文)
整理一下centos7安装redis3.0和phpredis扩展的过程,有需要的朋友可以拿去使用. 一.安装redis3.0 1.安装必要的包 yum install gcc 2.centos7安装r ...
- 移动端H5开发 (滑动事件)
最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...
- MySQL事件调度器event的使用
Q:假设,有一个需求,希望在某一个时刻系统调用一个begin end执行一下:十分钟以后执行一下begin end.亦或有一个需求,每个多长时间周期性执行begin end.那么这个时候该怎么办呢? ...
- Docker - 从零开始到操作
从零开始 介绍Docker的基本概念和命令,并给出简单使用示例和参考信息. Docker - 基础讲义 http://www.cnblogs.com/anliven/p/6281373.html Do ...
- PHP获取指定页面的指定内容
在刚入手PHP的时候,经理让我自己做一个文章的管理系统为了方便管理微信端发的消息.除了简单的添加分类.管理分类.添加文章.管理文章,还有一个功能就是要从微信文章网址中拿到网址上的标题.作者以及发表时间 ...