事件——《JS高级程序设计》
一、 事件流
1. 事件流描述的是从页面中接收事件的顺序
2. 事件冒泡（event bubble）：事件从开始时由最具体的元素（就是嵌套最深的那个节点）开始，逐级向上传播到较为不具体的节点（就是Document）
<!doctype html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id = 'myDiv'>
点击这里
</div>
</body>
</html>
/*
如果点击了div元素，那么这个click事件会按如下顺序传播
1. <div>
2. <body>
3. <html>
4. document
click事件首先在div元素上发生，也就是我们点击的元素，然后body元素发生点击事件……一层一层往上冒
*/
3. 事件捕获：不太具体的节点（Document根节点）更早接收到事件，最具体的节点最后接收到事件，刚好与冒泡相反
4. DOM事件流三阶段：
1. 事件捕获阶段：首先发生，为截获事件提供机会
2. 处于目标阶段：事件在此触发
3. 事件冒泡阶段：在这个阶段对事件作出相应
4. 跨浏览器的事件处理函数【可复用，最好手写】：
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.cancelBubble = true;
}
}
};
5. 事件处理程序：响应某个事件的处理函数就是事件处理函数
1. 常用的两个方法：用于处理指定和删除事件处理函数的操作方法：addEventListener()/removeEventListener()
2. 这两个方法接受3个参数：（事件名，处理函数，[,布尔值]）。布尔值默认为false，表示在冒泡阶段调用事件处理函数，true表示在捕获阶段调用事件处理函数
btn.addEventListener('click' , function(){} , false)
//可添加多个事件处理函数
//移除↓
btn.removeEventListener('click' , handler [, false])//移除的事件处理函数不能是匿名函数
6. 事件对象：在触发DOM的某个事件时，会产生一个事件对象：event，这个对象包含着所有的事件信息
1. currentTarget:绑定事件处理函数的那个目标。在事件处理程序内部，this始终等于currentTarget的值
2. target:事件被触发的那个目标
3. type：事件的类型：是click，还是mouseover……当需要一个函数处理多种事件时可以：
var handler = function(event){
switch(event.type){
case 'click':
function(){}
break;
case 'mouseover':
function(){}
break;
case 'mouseout':
function(){}
break;
}
}
btn.onclick = handler;
btn.mouseover = handler;
btn.mouseout = handler;
4. 阻止事件的默认行为，使用preventDefault()方法，只有cancelable属性为true的事件，才能用此方法阻止
5. stopPropagation():停止事件传播，取消以后事件的捕获和冒泡
6. stopImmediatePropagation() 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，还可以把这个元素绑定的同类型事件函数也阻止了。
7. 主要的事件类型：
1. UI事件：用户与页面元素交互时触发
1. load事件：页面完全加载后（包括所有图像、js、css等外部资源）触发。图像上也可以触发本事件
2. unload事件：只要用户从一个页面切换到另一个页面（重新加载页面、点击某个离开页面的链接等）就会发生unload事件
3. resize事件：浏览器窗口宽高变动（包括最大化最小化）
4. scroll事件
2. 焦点事件：（最常用的）
1. focus
2. blur
3. 鼠标事件
1. click
2. dbclick
3. mousemove
4. mouseenter
5. …………
6. event.clientX/Y:事件发生时，鼠标指针位置在**客户区**的坐标
7. event.pageX/Y:事件发生时，鼠标指针位置在**页面中**的坐标
8. event。screenX/Y:事件发生时，鼠标指针位置在**整个电脑屏幕**的坐标
4. 滚轮事件
1. mousewheel()
5. 文本事件
1. textInput():用户在可编辑区输入字符触发
6. 键盘事件
1. keydown():按下键盘任意键触发，按住不放重复触发
2. keypress()：按下键盘字符键触发，按住不放重复触发
3. keyup():释放按键时触发
7. 合成事件：基本无用
8. 变动事件：
9. 设备事件：
1. orientationchange事件
2. devicemotion事件：设备移动
3. 触摸与手势事件
1. touchstart
2. touchmove
3. touchend：手指从屏幕移开时触发
4. gesturestart：一个手指按在屏幕上，另一个手指触摸屏幕时触发
5. gesturechange：
6. gestureend:手指从屏幕上移开
8. 事件代理【重点】：
1. 事件处理函数过多，性能势必下降，解决方法就是事件委托（代理）
2. 事件代理利用了事件冒泡原理，只指定一个事件处理程序，用来管理所有类型的所有事件。比如：可以为整个页面指定一个click事件处理函数，而不用给每个需要单击的元素分别添加事件处理函数
<ul>
<li id = 'li1'></li>
<li id = 'li2'></li>
<li id = 'li3'></li>
</ul>
//为每个li元素都添加一个事件处理函数，太麻烦。只需要给DOM树中尽量最高层添加事件处理函数
EventUtil.addHandler(ul , 'click' ,handler); function handler(event){
switch(event.target.id){
case 'li1':
function(){};
break; case 'li2':
function(){};
break; case 'li3':
function(){};
break;
}
} ------------------解析------------------
/*
1. 用事件委托只为ul元素添加了一个click事件，由于所有的li元素都是ul的子节点，在li上的事件会往上冒泡，最终会冒到ul上，触发在ul上绑定的事件处理函数。
2. 因为只为一个DOM元素，添加了一个事件处理函数，占用内存更小，速度更快
3. 如果可行的话，可以考虑为Document添加一个事件处理函数，优点如下：
1. Document对象访问很快，可以在页面生命周期的任何时间为它添加事件处理函数
2. 在页面中设置事件处理函数所需的时间更少，对DOM的引用更少
3. 最适合采用的事件包括：click、mousedown/up、keydown/up/press
*/
事件——《JS高级程序设计》的更多相关文章
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图
读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺 ...
- 《JS高级程序设计》笔记 —— 解析查询字符串
今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...
- angular.js高级程序设计书本开头配置环境出错，谁能给解答一下
server.jsvar connect=require('connect');serveStatic=require('serve-static');var app=connect();app.us ...
- 读书笔记(05) - 事件 - JavaScript高级程序设计
HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...
- JS高级程序设计拾遗
<JavaScript高级程序设计(第三版)>反反复复看了好多遍了,这次复习作为2017年上半年的最后一次,将所有模糊的.记不清的地方记录下来,方便以后巩固. 0. <script& ...
- JS高级程序设计学习笔记之JS事件（1）
事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html ...
- JS高级程序设计3
PS:有一小部分写在了 JS 2017了 JSON <!DOCTYPE html> <html lang="en"> <head> <me ...
- JS高级程序设计 笔记
1.instanceof 可以判断实例是否在某个对象的原型上: function A() { this.a = "a"; } function B() { this.b = &qu ...
随机推荐
- volley+NetworkImageView实现列表界面的列表项中的左侧图标展现之【实现已经加载的列表项的图标上翻的时候不重新加载】
参考资料:http://blog.csdn.net/guolin_blog/article/details/17482165 我使用的列表的适配器是继承ArrayAdapter的,所以关于使用voll ...
- files_dir
一.opendir() —— 打开目录 opendir( 打开的当前目录 ); 二.closedir() —— 关闭目录 三.readdir() —— 返回目录中的各个元素,返回上一个并且指向 ...
- 接口和抽象类:Interface、abstract _【转】
一.接口 接口是C#中很常见的工具,概念什么的就不说了,这里讲几个值得注意的小地方: 1.接口内部只能有函数.属性和事件的声明: interface IParent { void Show(); st ...
- C#字符串拼接怎么转义背景图片
C#字符串拼接怎么转义背景图片 StringBuilder sb = new StringBuilder(); sb.Append("<div style=\"backg ...
- Mysql - 解决Access denied for user ''@'localhost' to database 'mysql'问题
http://361324767.blog.163.com/blog/static/11490252520124454042468/ 首先我想说一句话: 我极度鄙视国内搞IT的人,简直无语,同样是解决 ...
- Golden32 别名时中文 报ORA-00911: invalid character错误
查询数据库软件我一般用两个:PL SQL和golden32:使用golden32-之前使用的时候别名为中文是没有任何问题:直到我想将PL SQL汉化(使用中文包chinese.exe),汉化完后再次查 ...
- left join 改写标量子查询
数据库环境:SQL SERVER 2005 有一博彩的赔率是1:20,它有2张业务表:smuchs(投注表),lottery(开奖表). smuchs表有3个字段,分别是sno(投注号码).smuch ...
- 区分.net、c#、asp.net三者间的关系
1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type system). ②包含.net公共语言运行库( ...
- Vijos P1325桐桐的糖果计划
> P1325桐桐的糖果计划 标签:**图结构 强连通分量** 描述 桐桐很喜欢吃棒棒糖.他家处在一大堆糖果店的附近. 但是,他们家的区域经常出现塞车.塞人等情况,这导致他不得不等到塞的车或人走 ...
- IOPS和Throughput
IOPS和Throughput吞吐量两个参数是衡量存储性能的主要指标.IOPS表示存储每秒传输IO的数量,Throughput吞吐量则表示每秒数据的传输总量.两者在不同的情况下都能表示存储的性能状况, ...