JS高程3:事件
事件是JS和HTML交互的方式。
事件流
事件流是HTML文档接收事件的顺序。分为2个流派:事件冒泡流和事件捕捉流。
事件冒泡流
由内到外

事件捕捉流
由外到内

DOM事件流

事件处理程序
跨浏览器时间处理程序
自定义一个EventUtil对象:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubbles = true;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else { return null; }
}
}
JS高程3:事件的更多相关文章
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- 《JS高程》事件类型学习笔记
事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:
- js 高程 函数节流 throttle() 分析与优化
在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...
- js 高程 22.1.4 函数绑定 bind() 封装分析
js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...
- 《JS高程》-教你如何写出可维护的代码
1.前言 在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以 ...
- Node.js:events事件模块
Nodejs的大部分核心API都是基于异步事件驱动设计的,所有可以分发事件的对象都是EventEmitter类的实例. 大家知道,由于nodejs是单线程运行的,所以nodejs需要借助事件轮询,不断 ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js的touch事件的实际引用
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- 吃透Javascript数组操作的正确姿势—再读《Js高程》
Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...
随机推荐
- [Eclipse插件] Eclipse中如何安装和使用GrepCode插件
Java是开源的世界,如何快速的搜索到你需要的Java源码呢?2009年7月17日,GrepCode团队发布了一个有趣的 Java源码搜索引擎-GrepCode .与现有的各种搜索引擎相比,Java源 ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Cocos2d-x3.0游戏实例之《别救我》第七篇——物理世界的碰撞检測
事实上我也非常吃惊-居然写到第七篇了,我估计也就是四篇的内容,感觉非常奇妙,我也不会非常唠叨什么吖); // 0001 ); // 0001 ); // 0001 这样我们才干监听到它们的碰 ...
- YARN Application执行流程
原文见 http://xiguada.org/yarn-application_run/ 本节简单描述了一个Application在YARN上的执行流程,希望对初识YARN的同学提供一些帮助. 图1 ...
- Converter -> public static int ToInt32(double value) 你用对了么?
Convert.ToInt32() 是我们经常使用的方法,但如果我们写如下的代码,能确定它的输出值么? var x = 7.5; Console.WriteLine(7.5 + ": &q ...
- hdu5293(2015多校1)--Tree chain problem(树状dp)
Tree chain problem Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- JAVA简单选择排序算法原理及实现
简单选择排序:(选出最小值,放在第一位,然后第一位向后推移,如此循环)第一位与后面每一个逐个比较,每次都使最小的置顶,第一位向后推进(即刚选定的第一位是最小值,不再参与比较,比较次数减1) 复杂度: ...
- IP地址冲突排查
普通ARP请求报文(查找别人的IP地址,比如:我需要10.1.1.2的MAC地址,10.1.1.2是别人的IP)广播发送出去,广播域内所有主机都接收到,计算机系统判断ARP请求报文中的目的IP地址字段 ...
- java运行环境(JRE)
Java Runtime Environment(JRE) :运行Java程序所必须的环境的集合. JRE的组成: –包括Java 虚拟机 (JVM).Java核心类和支持文件. –不包含开发工具 - ...
- PHP中is_*() 函数用法
PHP中is_*() 函数用法 is_a - 如果对象属于该类或该类是此对象的父类则返回 TRUE is_array - 检测变量是否是数组 is_bool - 检测变量是否是布尔型 is_calla ...