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
altKey metaKey

mousedown/up:
event.button(0左键 1中 2右键)

移动设备(IOS/Android):
   
轻击单击元素触发mousemove,内容变化,不产生其他事件,否则:mousedown-mouseup-mouseclick
    mousemove:会触发mouseover
mouseout
    两个手指放在屏幕上,页面随手指滚动:mousewheel,scroll

无障碍阅读,屏幕阅读器:
   
mousedown,mouseover,dblclick不支持。

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的更多相关文章

  1. javascript基础-事件1

    原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...

  2. JavaScript基础事件(6)

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...

  3. 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 ...

  4. 【JavaWeb】JavaScript 基础

    JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...

  5. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  6. JavaScript基础笔记(九)事件

    事件 一.事件流 事件流描述的是从页面中接收事件的顺序. 一)事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点. 如:div------>b ...

  7. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  8. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  9. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

随机推荐

  1. CF #CROC 2016 - Elimination Round D. Robot Rapping Results Report 二分+拓扑排序

    题目链接:http://codeforces.com/contest/655/problem/D 大意是给若干对偏序,问最少需要前多少对关系,可以确定所有的大小关系. 解法是二分答案,利用拓扑排序看是 ...

  2. linq语句复杂查询和分开查询的性能对比

    刚开始以为复杂的linq语句查询会不会比分开来写效率高,因为复杂的语句关联和嵌套多,执行应该慢.分开写虽然多了一次io处理,但是关联比较少,数据了比价少,和朋友讨了一下,回家就做了个测试,废话不多说, ...

  3. Java工程中使用Mybatis (工程结合Mybatis,数据可以结合Swing使用)

    2011年6月iBatis 更名为 MyBatis,从 iBatis 到 MyBatis,不只是名称上的变化,MyBatis 提供了更为强大的功能,同时并没有损失其易用性,相反,在很多地方都借助于 J ...

  4. list、冒泡、二分法

    1.遍历第一次,寻找最大值,并且记录最大值的索引max_index 2.list(dict,str) 伪代码: if(是不是有饭吃): 如果是真 执行 (缩进) else: 如果是假 执行 写代码学习 ...

  5. Java中的多线程Demo

    一.关于Java多线程中的一些概念 1.1 线程基本概念 从JDK1.5开始,Java提供了3中方式来创建.启动多线程: 方式一(不推荐).通过继承Thread类来创建线程类,重写run()方法作为线 ...

  6. hibernate 使用 hibernate tool 生成配置文件和实体类

    安装Hibernate插件 下载所需的Hibernatetools  http://www.hibernate.org/6.html 将下载得到的文件解压得到的features和plugins文件夹, ...

  7. 修改maven本地仓库的默认地址

    由于maven默认仓库地址为C盘,所以缓存jar文件多了会占用掉C盘很多空间,鉴于此可更改maven仓库地址来避免.   1. 打开maven解压后目录,找到conf文件夹中的settion.xml文 ...

  8. (转载)提高mysql千万级大数据SQL查询优化30条经验(Mysql索引优化注意)

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  9. sqlmap连接Mysql实现getshell(原创)

    前言 昨天群友发了一知乎的帖子..才发现sqlmap玩了那么久有些玩意我居然没玩过...然后看着群友玩= =今天也想试试. 0x01 首先得知道这个玩意,sqlmap -help,不说大家也懂搜嘎. ...

  10. Python学习(一) —— matplotlib绘制三维轨迹图

    在研究SLAM时常常需要对其输出的位姿进行复现以检测算法效果,在ubuntu系统中使用Python可以很好的完成相关的工作. 一. Ubuntu下Python的使用 在Ubuntu下使用Python有 ...