javascript高级编程【javascript高级编程设计】 收藏 0

事件——《JS高级程序设计》

一、 事件流

1. 事件流描述的是从页面中接收事件的顺序

2. 事件冒泡（event bubble）：事件从开始时由最具体的元素（就是嵌套最深的那个节点）开始，逐级向上传播到较为不具体的节点（就是Document）

3. 事件捕获：不太具体的节点（Document根节点）更早接收到事件，最具体的节点最后接收到事件，刚好与冒泡相反

4. DOM事件流三阶段：

1. 事件捕获阶段：首先发生，为截获事件提供机会

2. 处于目标阶段：事件在此触发

3. 事件冒泡阶段：在这个阶段对事件作出相应

4. 跨浏览器的事件处理函数【可复用，最好手写】：

5. 事件处理程序：响应某个事件的处理函数就是事件处理函数

1. 常用的两个方法：用于处理指定和删除事件处理函数的操作方法：addEventListener/removeEventListener

2. 这两个方法接受3个参数：（事件名，处理函数，[,布尔值]）。布尔值默认为false，表示在冒泡阶段调用事件处理函数，true表示在捕获阶段调用事件处理函数

6. 事件对象：在触发DOM的某个事件时，会产生一个事件对象：event，这个对象包含着所有的事件信息

1. currentTarget:绑定事件处理函数的那个目标。在事件处理程序内部，this始终等于currentTarget的值

2. target:事件被触发的那个目标

3. type：事件的类型：是click，还是mouseover……当需要一个函数处理多种事件时可以：

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事件处理函数，而不用给每个需要单击的元素分别添加事件处理函数

动力节点最新JavaScript教程（高级篇），深入学习JavaScript

JavaScript是一种运行在浏览器中的解释型编程语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript广泛用于浏览器客户端编程，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能，用于为HTML网页增加动态功能，被广泛应用于Web应用开发中，为用户提供更流畅美观的浏览效果和体验。

本套课程是JavaScript的进阶课程，适用于已经学习了JavaScript基础知识的同学，如果你想继续对JavaScript的面向对象以及高级应用进行深入地学习，那么本套课程就是为你量身定做的，课程将会围绕对象，构造函数以及高级应用三个部分来展开，你将收获到对象的创建、属性的特征、操作原型对象、原型链继承、闭包、深浅拷贝等方面的知识，提高对JavaScript的认知深度。

本课程采用动力节点PDT4J教学法，以案例驱动教学，在案例中掌握JavaScript知识；

学习完JavaScript基础知识同学，想学习JavaScript面向对象以及高级应用的同学；

• JavaScript高级篇在线观看：

https://www.bilibili.com/video/BV1Sb4y1b7D4

• JavaScript高级篇资料下载：

http://www.bjpowernode.com/?toutiaojavascript

• 前置课程：

https://i.bjpowernode.com/courses/209.html

•001.JavaScript高级应用课程导读

•002.js高级应用介绍

•003.使用对象字面值创建对象

•004.使用new Object()创建对象

•005.使用构造函数创建对象

•006.第一种遍历对象的方法

•007.遍历对象的第2种方式

•008.遍历对象的第三种方式

•009.判断对象是否存在

•010.删除对象的属性

•011.对象属性的分类

•012.定义对象属性的特征

•013.定义对象的多个属性

•014.查看对象的多个属性

•015.构造函数的实例成员

•016.构造函数的静态成员

•017.构造函数的原型

•018.原型指向

•019.判断属性方法是否属于对象自身

•020.this的指向

•021.使用原型扩展内置对象的功能

•022.this的指向

•023.apply函数

•024.call方法

•025.bind函数

•026.call(),apply()和bind()的异同

•027.判断变量的数据类型

•028.使用父构造函数继承属性

•029.借用原型对象继承方法

•030.object的create方法

•031.数组对象的forEach方法

•032.数组对象的map方法

•033.数组元素的filter方法

•034.数组对象的some方法

•035.数组元素的every方法

•036.数组对象的find方法

•037.数组对象的reduce方法

•038.严格模式的开启

•039.严格模式的语法变化

•040.高阶函数

•041.作用域

•042.闭包

•043.闭包案例

•044.递归的概念和应用

•045.浅拷贝

•046.深拷贝

•047.使用class创建类以及对象

•048.父类的继承

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com