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. 恢复oracle数据库误删除数据的方法汇总

    学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些问题时,我开始寻找答案.今天主要以oracle数据库为 ...

  2. 常见BOM实用对象

    1.跨浏览器获取窗口左边上边位置 2.IE9+.Chrome.Safari.Opera.Firefox支持下列属性. innerheight 返回浏览器窗口本身的高度. innerwidth  返回浏 ...

  3. 深入理解MVC

    首先我们来看看MVC架构的示意图:             和访问者交互的是控制层(Controller层),控制器(controller)是同类交互的集合,每一个交互的操作,都对应了一个动作(act ...

  4. php checkbox 从数据库读取和写入

    checkbox将选中的值写入数据库中,在修改的时候如何从数据库中读取并设定Checkbox的状态 1.写入数据库提交后因为你的rol是数组,所以可以使用$_POST获取 PHP code   ? 1 ...

  5. 详解 Node + Redux + MongoDB 实现 Todolist

    前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...

  6. centos7安装redis3.0和phpredis扩展详细教程(图文)

    整理一下centos7安装redis3.0和phpredis扩展的过程,有需要的朋友可以拿去使用. 一.安装redis3.0 1.安装必要的包 yum install gcc 2.centos7安装r ...

  7. 移动端H5开发 (滑动事件)

    最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...

  8. MySQL事件调度器event的使用

    Q:假设,有一个需求,希望在某一个时刻系统调用一个begin end执行一下:十分钟以后执行一下begin end.亦或有一个需求,每个多长时间周期性执行begin end.那么这个时候该怎么办呢? ...

  9. Docker - 从零开始到操作

    从零开始 介绍Docker的基本概念和命令,并给出简单使用示例和参考信息. Docker - 基础讲义 http://www.cnblogs.com/anliven/p/6281373.html Do ...

  10. PHP获取指定页面的指定内容

    在刚入手PHP的时候,经理让我自己做一个文章的管理系统为了方便管理微信端发的消息.除了简单的添加分类.管理分类.添加文章.管理文章,还有一个功能就是要从微信文章网址中拿到网址上的标题.作者以及发表时间 ...