js中事件流、事件冒泡、事件监听、事件委托相关问题总结

雨点打透心脏的1/2处 2022-01-10 11:05 492阅读 0赞

## 1、事件流 ##

当触发某个事件时 从子元素到父元素或者从父元素到子元素的触发过程 成为 事件流  
事件流有两种模式 ：  
事件冒泡 从子元素向父元素触发  
事件捕获 从父元素向子元素触发  
//实测  
![事件流测试][20190619233533502.png]

![事件流图解][20190619233616571.png]![事件流图解][20190619233609350.png]

## 2、事件冒泡（重要） ##

当触发某个事件时，同样的事件会向父元素触发，这种现象就叫做事件冒泡  
阻止事件冒泡 ：

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

不是所有的事件都会产生冒泡现象 ，一般会产生冒泡现象常用事件 ：onclick onmouseover onkeyup onkeydown  
不会产生冒泡的行为的事件 ： onload onfocus（获取焦点）onblur(失去焦点)  
//阻止冒泡实测  
![阻止冒泡实测][20190619233745574.png]  
//联级菜单的运用  
![联级菜单的制作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
4、事件监听

事件的绑定 ：为元素添加事件的方式  
方式一　：标签上直接添加事件  
方式二 ： 在script标签内部添加事件  
方式三 ： addEventListener 使用事件监听方法为元素添加事件  
ie678 事件监听 : attachEvent() detachEvent()

元素.addEventListener( “事件” , function()\{  
注意 ： 这里的事件是去掉 on  
\}, true/false )第三个参数决定了冒泡或捕获行为 默认是false 冒泡

取消事件监听 ：  
removeEventListener()  
//测试  
![使用事件监听，为元素添加事件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
事件监听方法好处 ：  
1、可以为同一个标签添加多次同样的事件 事件均会被触发  
2、可以通过事件监听的方法完成冒泡或捕获行为

onclick 与 addEventListener(“click”)两种添加事件的区别 ：

前者同一个元素只能添加一次同样的事件 前者不可以实现捕获效果  
事件的取消: 事件源.事件 = null  
后者同一个元素可以添加多次同样的事件 后者既可以实现冒泡又可以实现捕获 第三个参数实现  
事件的取消: removeEventListener()

5、事件触发过程  
事件原理 ： 三个阶段  
事件捕获阶段  
目标阶段（事件源）  
冒泡阶段

6、浏览器的默认行为  
右键单击浏览器会弹出来菜单  
图片或文字默认会被拖拽  
超链接默认跳转或刷新页面  
submit按钮和button标签按钮在form标签中默认会刷新页面

7、阻止浏览器的默认行为  
兼容写法 ：  
e.preventDefault ? e.preventDefault() : e.returnValue = false  
或 return false; 各种浏览器都兼容

8、事件委托(重要 )  
委托 ：让别人完成  
事件委托 ： 当需要为多个同类的标签添加相同的事件时，可以将这个事件添加到这一批同类标签的父级元素上 注意：这里的父级可以是直接父级 也可以是爷爷级 曾爷爷 …  
事件委托好处 ：  
减少了事件绑定浏览器重绘的次数,提高了程序的执行效率;  
减少事件的冗余绑定，节约了事件资源。  
可以解决动态添加的元素节点无法绑定事件的问题;

事件委托机制 ：利用事件冒泡或捕获机制完成的 不能冒泡的事件也就不能使用事件委托

事件委托两个核心步骤 ：  
获取事件源：  
e.target || e.srcElement  
明确事件源：  
可以通过标签名 tagName/nodeName  
可以通过 类名 className  
可以通过 id  
可以通过 自定义属性 getAttribute()

//测试  
![js实现事件委托][js]  
9、json对象 javascript对象表示法  
是一种**轻量级**的数据存储格式 javascript object notation  
作用 ：存储数据　  
json对象的定义 和 获取json数据  
json对象是由键值对组成  
严格的json对象键必须用 双引号 括起来  
严格的json对象值不能是 函数  
json对象数据的获取 ：  
json.键 或 json\[“键”\]  
json对象的遍历 ： for…in  
//练习  
 ![js中json对象的练习][js_json]  
//表单动态创建

![js动态表单的创建][js 1]

[20190619233533502.png]: /images/20220110/f49c0450bbb9453a9b40934db4dc1e7c.png
[20190619233616571.png]: https://img-blog.csdnimg.cn/20190619233616571.png
[20190619233609350.png]: /images/20220110/2755997d61c34929a937f3d0485bee49.png
[20190619233745574.png]: /images/20220110/a0b89f0d7bd84e3c9e865422f2e7f344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220110/a739360bfe4d499db187f57f1d9e8609.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220110/f06e972e7b40453293c663fa5f1764c2.png
[js]: /images/20220110/32f5db82564a4c6085079ccf7a257d91.png
[js_json]: /images/20220110/0e55efa7ee734d2d9b4785300c86fddb.png
[js 1]: /images/20220110/ed5179d9b73a4f009e81f52105b6ca4f.png