菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: js中事件流_汪刚_20230517 [打印本页]

作者: 霁后彩虹O 时间: 2023-5-24 18:55
标题: js中事件流_汪刚_20230517
今日学习内容：

## 事件的属性 ##

1.箭头函数：

语法：() => {} 如果参数只有一个的时候,小括号可以省略没有 arguments 内置对象 this：箭头函数没有自己的this, 它的this就是父级的this指向

如果代码块中只有一行返回值，大括号和return都可以省略

2.classList属性

方法： ###

add() 添加元素 remove() 移除元素 toggle() 切换,有就移除，没有就添加

3.事件监听:

参数一：事件名，不需要加on 参数二：回调函数参数三：布尔值事件监听 : addEventListener()

参数一：事件名，不需要加on 参数二：回调函数事件解绑 : removeEventListener() 参数一:事件名参数二:事件程序

4.事件流:

事件冒泡：(不是所有的事件都有冒泡行为) 由内到外的执行过程 box3 -> box2 -> box1 -> body -> html -> document box1绑定事件 addEventListener() 第三个参数是一个布尔值 true就是捕获阶段 - 一般不会使用

stopPropagation : 用来阻止事件冒泡的

preventDafault : 用来阻止默认行为

禁止选中和禁止右键

5.DOM捕获阶段和冒泡阶段

DOM事件流：事件流描述的是从页面中接收事件的顺序。（事件传播的过程就是事件流）

包括三个阶段：

事件捕获阶段：该阶段的主要作用是捕获截取事件

处于目标阶段：一般地，该阶段具有双重范围，即捕获阶段的结束，冒泡阶段的开始;

事件冒泡阶段：主要作用是将目标元素绑定事件执行的结果返回给浏览器，处理不同浏览器之间的差异，主要在该阶段完成

捕获当用户点击按钮，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。

冒泡浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。

事件委托

当监听子元素时，事件冒泡会通过目标元素向上传递到父级，如果子元素不确定或者动态生成，可以通过监听父元素来取代监听子元素。

target与currentTarget

e 会在事件结束之后自动消亡，如果在setTimeout定时操作里使用e，则会报错：如下代码则会报错

解决方法：就是把e记下来

target是被操作（被点击）的元素

currentTarget是程序员监听的元素

6. target属性

7. [js dom 事件委托的 target 和currentTarget]

事件模型

　　JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。

2．其他常用属性

　　　　target：发生事件的节点；

　　　　currentTarget：当前正在处理的事件的节点，在事件捕获或冒泡阶段；

　　　 timeStamp：事件发生的时间，时间戳。

　　　　bubbles：事件是否冒泡。

　　　　cancelable：事件是否可以用preventDefault()方法来取消默认的动作；

　　　　keyCode：按下的键的值；

概念：

那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

为什么要用事件委托：

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

事件：元素天生自带的行为。

7.坐标方式：

可视区域坐标：client X或Y

文档中的坐标： page X或Y

显示器的坐标： screen X或者 Y

mousemove鼠标移动事件：鼠标每动一像素都会触发一次

这三个键盘事件同时存在：顺序 : keydown -> keypress -> keyup keypress 键盘按下（不识别一些功能键，shift、ctrl、↑ 、→之类的）

键值keyCode

输入框获得焦点：focus

失去焦点：blur

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)